Вызов JavaScript функции после загрузки динамического HTML

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Если вам нужно обеспечить немедленный вызов функции после загрузки динамически добавляемого JavaScript скрипта, установите обработчик onload для созданного элемента script:

Скопировать код

let script = document.createElement('script');
script.onload = function() {
    // Сейчас время действовать: вызываем вашу функцию
    yourAwesomeFunction();
};
script.src = 'path_to_your_script.js'; // Проверьте корректность пути к скрипту
document.head.appendChild(script);

Такой подход гарантирует мгновенное и плавное выполнение функции yourAwesomeFunction после загрузки скрипта path_to_your_script.js.

Кинга Идем в IT: пошаговый план для смены профессии

Секреты кроссбраузерности

Не забудьте о поддержке Internet Explorer версий младше 9 при динамическом добавлении скриптов. Для этих целей воспользуемся свойством script.readyState и обработчиком ошибок:

Скопировать код

let script = document.createElement('script');
script.type = 'text/javascript';

// Более старые версии IE предпочитают классику, а не новомодные штуки
script.onreadystatechange = function() {
    if (this.readyState === 'complete' || this.readyState === 'loaded') {
        callback();
    }
};
script.onload = callback;
script.onerror = function() {
    // Сигнал о том, что что-то пошло не так
    console.error('Упс! Что-то не так со скриптом.');
};
script.src = 'path_to_your_script.js';
document.getElementsByTagName('head')[0].appendChild(script);

// Функция обратного вызова
function callback() {
    yourAwesomeFunction();
}

Традиции чистого JavaScript без применения jQuery

Если вы склоняетесь в сторону использования нативного JavaScript вместо jQuery, то вызов функции после загрузки скрипта можно осуществить с помощью атрибута onload:

HTML

Скопировать код

<!-- Прекрасный классический JavaScript без лишних добавок -->
<script src="path_to_your_script.js" onload="yourAwesomeFunction()"></script>

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

Скрипты и Promise: современные тенденции

Современный мир JavaScript это настоящий ароматный букет, где Promise играет роль изысканного вина. Используем их для успокоительной и гладкой загрузки скриптов:

Скопировать код

const loadScript = function (src) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        script.src = src;

        // Скрипт загружен – настало время в действие
        script.onload = () => resolve(script);

        // Произошла ошибка при загрузке
        script.onerror = () => reject(new Error(`Ошибка загрузки скрипта ${src}`));
        
        document.head.appendChild(script);
    });
};

loadScript('path_to_your_script.js')
    .then(script => yourAwesomeFunction())
    .catch(error => console.log(`Ошибка при загрузке скрипта: ${error.message}`));

Для ещё более плавной работы используйте async и await:

Скопировать код

async function loadAndExecute(src) {
    try {
        await loadScript(src);
        yourAwesomeFunction();
    } catch (error) {
        console.log(`Ошибка при выполнении скрипта: ${error.message}`);
    }
}
loadAndExecute('path_to_your_script.js');

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

Создадим функцию loadScript, которая будет загружать скрипты просто и быстро, как готовится растворимый кофе:

Скопировать код

function loadScript(src, callback) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => callback();

    script.onerror = () => console.error(`Ошибка загрузки скрипта ${src}.`);
    document.documentElement.appendChild(script);
}

loadScript('path_to_your_script.js', () => console.log('Скрипт успешно загружен.'));

Эта функция loadScript скоростная и эффективная и может быть использована в самых разнообразных сценариях. Это поистине универсальный инструмент для загрузки скриптов.

Визуализация

Давайте визуализируем процесс загрузки скриптов и выполнение функций. Представьте, что это путешествие поезда:

Markdown

Скопировать код

🚂: Экспресс 'Загрузка Скрипта'
Маршрут: 📜 Кодовый Депо -> 📞 Сетевая Остановка -> 🖥️ Браузерный Терминал

Используем атрибут onload:

Скопировать код

<!-- Вызываем функцию (разгружаем груз), когда поезд (скрипт) прибывает на конечную станцию (загружен) -->
<script src="your_script.js" onload="yourAwesomeFunction();"></script>

Когда экспресс добирается до Браузерного Терминала:

Markdown

Скопировать код

📢 "Уважаемые пассажиры, функция 'yourAwesomeFunction()' успешно прибыла на станцию. Все системы функционируют нормально!"

Устойчивый процесс работы обеспечивает безупречное выполнение функции сразу после загрузки скрипта.👌

Универсальные инструменты для обработки скриптов

От функции loadScript с интегрированным обратным вызовом до TypeScript для обеспечения изоляции глобальных переменных – у вас в распоряжении целый арсенал инструментов:

typescript

Скопировать код

// Версия на TypeScript
const loadScript = (src: string): Promise<void> => {
    return new Promise((resolve, reject) => {
        const script: HTMLScriptElement = document.createElement('script');
        script.src = src;

        // Когда скрипт будет загружен
        script.onload = () => resolve();

        // Если возникла ошибка при загрузке
        script.onerror = () => reject(new Error(`Загрузка скрипта не удалась: ${src}`));
        document.head.appendChild(script);
    });
};

Если важна скорость, используйте технику JSONP и добавьте функцию loadedContent() в конец загружаемого скрипта, чтобы ускорить процесс загрузки, по аналогии с Falcon 9.

Подходящий инструмент для подходящего скрипта

Выбор метода должен зависить от конкретной задачи: для маленьких проектов подойдут loadScript и обратные вызовы, а для более сложных – Promise. Ключ к успеху – использование наиболее подходящего инструмента для каждого конкретного скрипта.

Полезные материалы

Как подключить JavaScript файл в другом JavaScript файле? — в этой ветке на StackOverflow обсуждается динамическая загрузка JS.
Ленивая загрузка | webpack — руководство по ленивой загрузке модулей в Webpack для улучшения времени загрузки.
Скрипты: async, defer — информация про использование async и defer, а также детали динамической загрузки скриптов.
Обработчик 'onload' для тега 'script' в Internet Explorer — обсуждение на StackOverflow поведения onload в браузере IE.
Подробный анализ темной стороны загрузки скриптов — обзор различных стратегий загрузки скриптов для повышения веб-производительности.
<script>: Элемент Script — обзор на MDN о async в скриптах и его использовании.
<script>: Элемент Script — обзор defer в скриптах на MDN.

Свежие материалы

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024

Видео уроки по веб-разработке

6 сентября 2024

Коды состояния HTTP: что они значат?

6 сентября 2024