как динамически добавлять script с помощью document write в javascript

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

При использовании 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, вы можете выполнять действия после полной загрузки скрипта.

Вы можете легко манипулировать созданным скриптом, задавать различные атрибуты, управлять их порядком исполнения и так далее.

9 месяцев назад

Ivan Gagarinov

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы