1+1
Киберпредложение!
Скидки до 30 000₽ + 2 ая профессия в подарок до 31.01

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

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
22 декабря 2024

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

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

0 0

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Программирование

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

Тест-драйв

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

Верстка

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

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

Бесплатные курсы

Бесплатные курсы по тестированию, дата-аналитике, верстке, программированию на Python, Java, PHP и JavaScript.

Фреймворки

Базы данных