Абстракт
В статье рассматривается проблема очередности загрузки внутренних и внешних 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>