Современные динамические интерфейсы web-страниц подразумевают не только изменение содержимого различных тегов, но и динамическую подгрузку скриптов JavaScript с их последующим выполнением. Например, получение скриптов или данных для них через AJAX. Способы передачи данных я тут рассматривать не буду, а расскажу о том, как динамически добавить скрипт на сформированную web-страницу и затем выполнить его. Это можно сделать как минимум двумя способами. Первый способ - добавление скрипта средствами JavaScript с использованием стандартной функции
eval. Она получает в качестве аргумента строку и, рассматривая ее содержимое как код JavaScript, пытается выполнить. Например:
<script type="text/javascript">
eval('function do_my_job(txt) { alert(txt); }');
do_my_job('ok');
</script>
Второй способ, более корректный, - это добавление скриптов через DOM. При этом создается новый объект script, заполняется его тип и текст, а затем созданный объект добавляется в качестве дочернего элемента к элементу head. В этом случае добавленный скрипт будет сразу же выполнен. Для удобства я написал небольшую функцию, получающую в качестве аргумента текст скрипта, и добавляющую его на страницу.
<script type="text/javascript">
function add_script(txt) {
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.text = txt;
document.getElementsByTagName('head')[0].appendChild(newScript);
}
</script>
Во всех тестовых браузерах (IE 5.5-8, Opera 7-10, Firefox 2-3, Chrome, Safari и т.д.) скрипт выполнялся также при добавлении его к элементу
body. Опытным путем установлено, что скрипт срабатывает при добавлении и к другим элементам страницы, но лучше, наверное, так не делать для сохранения кроссбраузерности и совместимости.
И напоследок немного извращений. Попробуем не добавлять новый скрипт, а заменить исходный текст какого-нибудь уже существующего скрипта.
<script id="myscript" type="text/javascript">
// Скрипт, который мы будем менять
function some_func(txt) {
alert(txt);
}
</script>
<script type="text/javascript">
// Вызвать исходный скрипт
some_func('first time');
var e=document.getElementById('myscript');
// Заменить его содержимое
e.text='function some_func(txt) { alert (txt+" - NEW!!!"); }'
// Вызвать измененный скрипт
some_func('second time');
</script>
Поведение этого кода под разными браузерами отличается. Браузеры на движках Gecko (Firefox, Mozilla, Flock, K-Meleon) и WebKit (Safari, Chrome, Iron) кладут с пробором на такое изменение, и в обеих случаях будет вызвана первоначальная функция, хотя фактически исходный текст скрипта будет уже изменен. Браузеры Opera и IE разных версий после изменения исходного текста скрипта обрабатывают уже новую функцию, и во втором случае будет выведено сообщение "
second time - NEW!!!". Практическую пользу от применения этого трюка я вижу для точного определения типа браузера, естественно, в комбинации с другими методами.