[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
Впервые, когда я попробовал динамически загрузить .js файл, я чуть не заработал нервное расстройство. Вот что я написал сначала:
<script type="text/javascript">
function loadScript(url)
{
document.write('<script src="', url, '" type="text/javascript"></script>');
}
loadScript(navigator.appName.indexOf("Microsoft") != -1 ? "ie_msg.js" : "ns_msg.js");
</script>Попробовал запустить – получил ошибку времени выполнения "Undetermined string constant (неопределенная строковая константа)".
Что, во имя всего святого, это могло бы значить?
Но отыскать ответ на свой вопрос мне удалось только после прочтения JavaScript: The Definitive Guide Дэвида Фланагана. В общем, содержимое тэга <script> выполняется JavaScript-интерпретатором, несмотря на то, что он содержится внутри строки. Встает вопрос, зачем они выбрали такую непостижимо странную реализацию??? Можно предположить, что это для скорости, но хорошо бы все-таки располагать фактами. Как бы я ни любил Фланагана, я был немного разочарован отсутствием разъяснения в его книге. Беглый взгляд на ECMAScript Language Specification также не принес результатов. Возможно, такое поведение является побочным продуктом HTML-парсера. Честно говоря, я не знаю. Я буду продолжать изыскания в свободное время (которое, к сожалению, имеется у меня в достаточно ограниченном количестве) и оставлю комментарий здесь, когда (если) найду. Я с радостью воздам вам почести, если вы раскроете эту ускользающую загадку вселенной.
Хорошо, но как же все-таки динамически загрузить внешний JavaScript-файл?
Я назову вам два способа решения этой проблемы. Первый из них (назовем его статическим) JavaScript-эксперты рекомендовали обычным смертным еще с тех незапамятных времен, когда наши предки впервые спустились с деревьев и, вооруженные дубинами, отправились искать себе пропитание.
Другой способ – динамический (DHTML) – по «удивительному» стечению обстоятельств использует DHTML. Насколько я знаю, я – первый человек на этой планете и даже, наверное, во вселенной (но, вероятно, не в измерении 1217.32 вселенной z540a – эти ребята действительно вяжут шпалы в узлы), кто использует этот подход. Неплохо для безработного, а? Жаль, что Межгалактическое Транспортное Управление не было заинтересованно в приглашение меня на работу в Отдел Пространственно-Временных Ретикуляций.
Итак, статический способ
Используя его, вы ставите экранирующий символ (escape character) перед закрывающим </script> тэгом следующим образом: <\/script> (что и сделано в нижеуказанном фрагменте кода). Экранирование предотвращает нежелательное выполнение JavaScript-строки, содержащей тэг <script>.
<script type="text/javascript">
function staticLoadScript(url)
{
document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}
staticLoadScript("static_way.js");
</script>Метод staticLoadScript() в этом примере должен быть вызван, пока страница загружается (т.к. он использует document.write(), чтобы создать <script>-тэг для импорта внешнего скрипта). Если вы вызовете staticLoadScript() после загрузки страницы, это приведет вашу страницу в негодность, т.к. write() затрет содержимое документа.
Динамический (DHTML) способ
В данном случае вы создаете новый DOM-элемент «script» и добавляете его к документу.
<script type="text/javascript">
function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function()
{
dhtmlLoadScript("dhtml_way.js");
}
</script>В отличие от staticLoadScript() из предыдущего примера, метод dhtmlLoadScript() может быть вызван в любой момент выполнения программы, правда, документ должен быть хотя бы частично загружен в браузер. В указанном выше фрагменте, документ гарантированно будет загружен к моменту вызова dhtmlLoadScript(), т.к. вызов происходит в обработчике onload.
Ограничения
Приведенный выше метод dhtmlLoadScript() будет работать только в браузерах, поддерживающих динамическое добавление элементов к странице, используя DOM (Document Object Model). А значит, этот метод не заработает в Netscape версии ниже 6, а также Opera 7 и ниже. Я не считаю, это реальной проблемой, врядли кто-либо в здравом уме будет поддерживать эти давно устаревшие браузеры, по крайней мере, если на это нет чертовски хорошей причины.
----------
Оригинальный текст статьи: Dynamically Loading External JavaScript Files
