Javascript.RU

Динамическое подключение javascript. Как подключить и выполнить javascript?

Иногда требуется динамически подключать скрипты в нужный момент после загрузки сайта.
Такие сайты как Яндекс, Гугл, Мэил ру и другие используют это постоянно.

Какие проблемы могут возникнуть если динамически подключить javascript с помощью вот такого кода?

<script type="text/javascript">
javascript:var s = document.createElement('script');s.type='text/javascript';
document.body.appendChild(s);s.src='http://nagon.net/js/NRMSLib.js';
modules.sound.start();
void(0);
</script>

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

modules.sound.start();

К сожалению код выше выдаст ошибку из за того что метод будет вызван раньше чем загрузилась библиотека...

Другой вариант, это вызывать метод по таймеру:

<script type="text/javascript">
var s = document.createElement('script');s.type='text/javascript';
document.body.appendChild(s);s.src='http://nagon.net/js/NRMSLib.js';
setTimeout('modules.sound.start();',5000);
void(0);
</script>

Но этот вариант тоже не вызывает доверия.
В благоприятном случае на сайте должна заиграть музыка... но это может и не случится с вероятностью в 10 %

Как же яндекс и другие крупные сайты обходят эту проблему?
Они проверяют загруженность подгружаемого javascript с помощью своих довольно сложных для понимания новичкам библиотек.

Чтобы не копаться в дебрях браузерных несовместимостей и ошибок, перед тегом head подключим ScriptJava фреймворк, добавив вот такой код:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

А дальше все просто, давайте теперь грамотно запустим наш первый пример:

<script type="text/javascript">
//Подключаю внешний скрипт и запускаю из него метод
$$i({
  create:'script',
  attribute: {
    'type':'text/javascript',
    'src':'http://nagon.net/js/NRMSLib.js'
  },
  insert:$$().body,
  onready:function() {
    modules.sound.start();//запускаю метод из подгруженной библиотеки
  }
});
</script>

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

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

+2

Автор: Хафиз (не зарегистрирован), дата: 22 сентября, 2012 - 22:10
#permalink

Благорарю за статью, несколько сложно для начинающего веб мастера, но всеже:)


Автор: Гость (не зарегистрирован), дата: 12 апреля, 2022 - 21:20
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:52
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 02:37
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:12
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 14:30
#permalink

Автор: Гость (не зарегистрирован), дата: 15 февраля, 2024 - 10:20
#permalink

Keep providing more bitlife interesting posts!


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum