как динамически добавлять script с помощью document write в javascript
При использовании document.write
, вы можете добавить JavaScript на страницу следующим образом:
document.write('<script src="URL_вашего_скрипта.js"><\/script>');
Обратите внимание на символ \/
, который используется для экранирования символа /
, чтобы document.write
не завершил тег <script>
до его окончания:
document.write('<script src="https://example.com/script.js"><\/script>');
Тем не менее, вызов document.write
после загрузки страницы приведет к удалению содержимого page или вызовет ошибку, так как этот метод 'перезаписывает' содержимое документа.
Лучше намного более безопасным и современным способом добавления скрипта является создание элемента <script>
и добавление его в документ:
function loadScript(url, callback) {
const script = document.createElement('script'); // Создаем элемент <script>
script.type = 'text/javascript'; // Устанавливаем тип
if (script.readyState) { // Для IE
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
callback(); // Вызов функции после загрузки скрипта
}
};
} else { // Для остальных браузеров
script.onload = function () {
callback(); // Вызов функции после загрузки скрипта
};
}
script.src = url; // Устанавливаем источник скрипта
document.head.appendChild(script); // Добавляем скрипт в <head> или <body>
}
// Использование функции
loadScript('https://example.com/script.js', function() {
console.log('Скрипт загружен и готов к использованию!');
});
Вызывая document.write
, вы можете навредить произвольному состоянию DOM. Создание элемента <script>
и его добавление не приведет к повреждениям.
Используя обработчики событий onload
, вы можете выполнять действия после полной загрузки скрипта.
Вы можете легко манипулировать созданным скриптом, задавать различные атрибуты, управлять их порядком исполнения и так далее.