Выполнение скрипта, загруженного на страницу при помощи 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 есть, выполнить.