*.JS, когда грузиться думаешь? - Обзор - Shelek
Абстракт

В статье рассматривается проблема очередности загрузки внутренних и внешних JS-скриптов в динамически создаваемых HTML-страницах. Все, о чем идет речь, касается только Internet Explorer v5 и выше (IE4 не пробовал).

Интродюкшн

Как-то однажды делал я такую вот штучку: на открытой в браузере HTML-странице в поле TEXTAREA ввожу команды, нажимаю кнопку - JS-скрипт обрабатывает эти команды, формирует по ним код и создает новое окно, в которое этот код записывает. В новый документ в обязательном порядке записывалась строка, подключающая внешний скрипт - <script src="tools.js"> - для доступа к сервисным функциям.

Когда я стал это дело отлаживать, обнаружилась одна неожиданная неприятность: что-то было не так со скриптом, загружаемым из файла tools.js. Как оказалось впоследствии, дело было не в коде скрипта, а в том, что он являлся внешним.

Суть проблемы

Итак, вот что я обнаружил. Пусть имеется код:

<html>

<head>

<script id="S1">

--- script code ---

</script>

<script id="S2" src="tools.js"></script>

<script id="S3">

--- script code ---

</script>

</head>

<body>

<script id="S4">

--- script code ---

</script>

</body>

</html>

Если этот HTML-код загружается из файла, то порядок загрузки скриптов естественный: S1 - S2 - S3 - S4. Если же его записать с помощью newWin.document.write в созданное окно newWin, то порядок загрузки скриптов уже другой: S1 - S3 - S4 - S2(!) Т.е. порядок сохранился, если забыть о внешнем скрипте. В данном примере этот скрипт помещен внутрь <head>, но это не существенно, т.к. в <body> ничего не меняется.

Следующий пример призван продемонстрировать описанное изменение порядка загрузки скриптов.

Внешний скрипт example.js:

function demo() {

alert("example.js:demo() - Я доступна");

}

Тестовая страница:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">

<title>Пример 1.</title>

<script language='JavaScript' src='example.js' charset='windows-1251'></script>

<script language="JavaScript">

code = "<html>\n\

<head>\n\

<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\">\n\

<title>Пример 1. Динамически созданный документ.</title>\n\

<script language='JavaScript' src='example.js' charset='windows-1251'><"+"/script>\n\

<script language='JavaScript'>\n\

window.onerror = myerror;\n\

\n\

function myerror(msg,url,line) {\n\

alert('Генерится ошибка \\n\"'+msg+'\"\\nв строке '+line+'\\nЛегко убедиться,\\n\

что в этой строке стоит вызов demo()');\n\

return true;\n\

}\n\

<"+"/script>\n\

</head>\n\

<body>\n\

<span id=\"ilnb\">Проверяем доступность</span><br>\n\

<script language=\"JavaScript\">\n\

demo();\n\

<"+"/script>\n\

<script language=\"JavaScript\">\n\

document.all.ilnb.innerHTML += ' - выполнено';\n\

<"+"/script>\n\

Нажмите кнопку \"Обновить\", и ошибка не появится, т.к. документ уже статичен\n\

</body>\n\

</html>";

function test() {

w = window.open();

w.document.write(code);

}

</script>

</head>

<body>

<span id="ilnb">Проверяем доступность</span><br>

<script language="JavaScript">

demo();

document.all.ilnb.innerHTML += ' - выполнено';

</script>

<a href="#" onclick="test(); return false;">Создать динамический документ</a>

</body>

</html>
Information
  • Posted on 27.04.2013 18:03
  • Просмотры: 3033