ПупФреймворков и библиотек для асинхронной подгрузки HTML в какой нибудь div итп. полно, но все они могут подгружать только простой HTML. Если же в HTML коде содержится JavaScript, то он не выполняется либо лезут баги после загрузки.
Есть так же возможности асинхронно подкачивать js и css файлы но это всё не то. Мне нужно асинхронно загрузить в DIV - HTML содержащий JavaScript. Кто нибудь сталкивался с такой проблемой?
PS
Вынести JavaScript в отдельный JS файл не предлагать. Там используюся конструкции типа document.write и поэтому JavaScript должен находиться прямо в HTML
Какие проблемы? - У меня последний проект от и до построен на такой схеме, все страницы (пока десятка 3) грузятся динамически. Точнее, не страницы, а контент рабочей области. Зачастую скрипты вместе с хтмл-кодом занимают строк по 600-900. Не скажу про ВСЕ навигаторы, но ИЕ6, ИЕ7 и ФФ2 работают отлично. Конечно, есть js-файл, но он служит только для загрузки моего контента и обработки некоторых универсальных вещей - ввода текста, вывода текста ошибок, загрузки скрипта и т.д.
Что интересно, есть страницы, которые грузятся динамически, создают плавающий див и точно таким же способом грузят в него также код и скрипт, который так же выполняется.
В принципе, сделано достаточно сложно и не очень удобно. Но главное, чего добивался - динамическая подгрузка контента (типа десктоп приложение) и практически полная защищенность кода.
Использую следующую конструкцию (прошу не ругать - это с прошлого проекта и требует доработки, чем позже и займусь):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
function updateContent(_action) {
var url = document.getElementById("content").value + "?subAction=" + _action + "&rand=" + Math.random();
request.open("POST", url, true);
request.onreadystatechange = behaviorContent;
request.send(null);
}
function updateContentWithData(_data) {
request.open("POST", document.getElementById("content").value, true);
request.onreadystatechange = behaviorContent;
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(urlEncodeData(_data));
}
function behaviorContent() {
if (request.readyState == 4 ) {
_message = request.responseText;
var active_div = "main_body";
if (_message != "") {
if (_message.slice( 0 , 6 ) == "error!") {
_message = _message.split("|")[ 1 ];
active_div = "error_body";
} else clearError();
document.getElementById(active_div).innerHTML = _message;
run_script(document.getElementById(active_div));
window.status = "";
}
}
}
function urlEncodeData(data) {
var query = [];
if (data instanceof Object) {
for (var i in data) query.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
return query.join('&');
} else return encodeURIComponent(data);
}
function run_script(_div) {
var divContent = _div.childNodes;
for (var i = 0 ; i < divContent.length; i++) {
requestItem = divContent.item(i);
if (requestItem.tagName)
if (requestItem.tagName.toUpperCase() == 'SCRIPT') eval(requestItem.text);
else run_script(requestItem);
}
}
"main_body" - id того самого дива, содержимое которого меняется.
Если первые 6 получаемых символов - "error!", содержимое не обновляем, а выписываем ошибку.
