Привет.
Есть файл скрипта:
test.js
var cool = {id:5};
Теперь самое интересное!
Подключаем этот файл из *.html методом раз:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="test.js"></script>
<script>alert(cool.id);</script>
</head>
<body>
<button onClick="javascript:alert(cool.id);">Press here for get you id now!</button>
</body>
</html>
Тут все понятно. Сначала alert'ом выводится число 5, а если нажимаем на кнопку "Press here for get you id now!", то число 5 выводится еще раз.
Подключаем этот файл из *.html методом два:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<body>
<button onClick="javascript:alert(cool.id);">Press here for get you id now!</button>
<script>
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'test.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
})();
</script>
<script>alert(cool.id);</script>
</body>
</html>
При попытке вывести число 5, простым alert'ом появляется ошибка:
cool is not defined
а если нажать на кнопку, то все в порядке и число 5 выводится!
Почему так происходит?
Хочу обратить внимание, что во втором варианте подключения, я даже строку
<script>alert(cool.id);</script>
опустил ниже динамического подключения самого скрипта.
Чтобы на верняка!