Выполнение скрипта, загруженного на страницу при помощи AJAX
Самый простой вариант - использовать eval(). Пусть data - некоторый контент, который мы загрузили.
// Прикрепляем контент к имеющейся DOM структуре:
var out = document.getElementById("content");
out.innerHTML = data;
// Получаем все скрипты из загруженного контента:
var scripts = out.getElementsByTagName('script');
// Обходим все вставленные скрипты и инициируем их выполнение:
var len = scripts.length;
for (var i = 0; i < len; i++) {
eval.call(window, scripts[i].innerHTML);
}
Другой вариант - разделить загрузку javascript и html
Браузер не знает о том, что был добавлен некий javascript: консоль ошибок Firefox сообщает, что loadPage not defined. Надо загружать отдельно js и html и дать понять браузеру, что был загружен js. Т.е. надо создать объект <script> и внутрь этого объекта прописать ответ сервера (т.е. function loadPage() {...}). Тогда браузер сможет понять, что нечто, полученное с сервера - это исполняемый javascript.
Вот как это будет без использования библиотеки:
1.html
<html>
<head>
<title>...</title>
<script type="text/javascript">
window.onload = function() {
var xmlHttpScript = getXmlHttp();
xmlHttpScript.open('GET', '3.txt', true);
xmlHttpScript.onreadystatechange = function() {
if (xmlHttpScript.readyState == 4) {
if(xmlHttpScript.status == 200) {
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.text = xmlHttpScript.responseText;
document.getElementsByTagName('body')[0].appendChild(scr);
}
}
}
xmlHttpScript.send(null);
var xmlHttpHtml = getXmlHttp();
xmlHttpHtml.open('GET', '2.html', true);
xmlHttpHtml.onreadystatechange = function() {
if (xmlHttpHtml.readyState == 4) {
if(xmlHttpHtml.status == 200) {
document.getElementById('myDiv').innerHTML = xmlHttpHtml.responseText;
}
}
}
xmlHttpHtml.send(null);
}
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
2.html
<select onChange="loadPage()"> <option value="1">1</option> <option value="2">2</option> </select>
3.txt
function loadPage() {
alert('Привет!');
}
И наконец, с использованием jQuery проблема решается автоматически:
1.html
<html>
</head>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myDiv').load('2.html');
});
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
2.html
<script type="text/javascript">
function loadPage() {
alert('Привет');
}
</script>
<select onChange="loadPage()">
<option value="1">1</option>
<option value="2">2</option>
</select>
При использовании jQuery можно не разделять html и js - похоже, авторы библиотеки позаботились о том, чтобы при загрузке некого контента с сервера проверять его на предмет наличия js. И если js есть, выполнить.