PHP开发

之前曾讲到采用set_innerHTML函数实现执行innerHTML中的JAVASCRIPT代码，其中讲到一种方法就是采用JS创建一个iframe的方式。

这里就将该方式的实现作一个介绍。

在我们使用AJAX的时候，经常要用到innetHTML来更新对象的内容，但是对于更新的<script>脚本程序浏览器却无法执行，我前面AJAX初学常遇问题解答这篇文章曾提到过这个问题，它不执行的原因是：<script>标签只在浏览器第一次文档加载中被解析，下面介绍怎么样让<script>跑起来。

分析问题
既然<script>只在文档加载中才被解析，那么我就得调用document.write()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把document.write()装载起来。

解决问题
var jsCode = 需要执行的JS代码
var jsIframe = document.createElement(“iframe”);
jsIframe.style.display = “none”;//把jsIframe隐藏起来
document.body.appendChild(jsIframe);
with(window.frames[window.frames.length - 1]){
document.open();
document.write(jsCode); //执行JS代码
document.close();
}
document.body.removeChild(jsIframe);//执行后删除iframe对象
这里需要注意一个问题，因为jsCode是在iframe中运行，所以所有的页面元素都在iframe父对象之下，要调用页面元素对象必须得用 parent.obj 这种方式。

另外一种方法：

用dom动态创建一个script对象
var script=document.createElement(“script”);
script.src=”XXXX.js”;
document.body.appendChild(script);

DIV/CSS, HTML, Javascript innerHTML, java, Javascript, set_innerHTML

在使用AJAX时，往往只是将reponse的内容直接innerHTML到指定的容器里面，这种应用都非常简单。但是对于reponse的内容包含javascript内容时将如何处理呢？能否执行其返回的JS呢？

实际上，对于返回的内容，页面不会直接执行该JS代码，google一下，才发现关于这个问题的解决方法大概有三种：

1、首先在head标签内容设定一个指定ID的script标签，待响应时修改其src 属性。

2、创建一个iframe，然后将JS写入到该IFRAME中，对于要操作原页面的HTML标签，需要在里面的JS中添加parent。

3、应用较多的set_innerHTML，该函数是由andot所开发的。

以下为set_innerHTML函数内容。

var global_html_pool = [];
var global_script_pool = [];
var global_script_src_pool = [];
var global_lock_pool = [];
var innerhtml_lock = null;
var document_buffer = "";

function set_innerHTML(obj_id, html, time) {
if (innerhtml_lock == null) {
innerhtml_lock = obj_id;
}
else if (typeof(time) == "undefined") {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
return;
}
else if (innerhtml_lock != obj_id) {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
return;
}

function get_script_id() {
return "script_" + (new Date()).getTime().toString(36)
+ Math.floor(Math.random() * 100000000).toString(36);
}

document_buffer = "";

document.write = function (str) {
document_buffer += str;
}
document.writeln = function (str) {
document_buffer += str + "\n";
}

global_html_pool = [];

var scripts = [];
html = html.split(/<\/script>/i);
for (var i = 0; i < html.length; i++) {
global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, "");
scripts[i] = {text: '', src: '' };
scripts[i].text = html[i].substr(global_html_pool[i].length);
scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i);
if (scripts[i].src) {
if (scripts[i].src[2]) {
scripts[i].src = scripts[i].src[2];
}
else if (scripts[i].src[3]) {
scripts[i].src = scripts[i].src[3];
}
else if (scripts[i].src[4]) {
scripts[i].src = scripts[i].src[4];
}
else {
scripts[i].src = "";
}
scripts[i].text = "";
}
else {
scripts[i].src = "";
scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");
}
}

var s;
if (typeof(time) == "undefined") {
s = 0;
}
else {
s = time;
}

var script, add_script, remove_script;

for (var i = 0; i < scripts.length; i++) {
var add_html = "document_buffer += global_html_pool[" + i + "];\n";
add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
script = document.createElement("script");
if (scripts[i].src) {
script.src = scripts[i].src;
if (typeof(global_script_src_pool[script.src]) == "undefined") {
global_script_src_pool[script.src] = true;
s += 2000;
}
else {
s += 10;
}
}
else {
script.text = scripts[i].text;
s += 10;
}
script.defer = true;
script.type =  "text/javascript";
script.id = get_script_id();
global_script_pool[script.id] = script;
add_script = add_html;
add_script += "document.getElementsByTagName('head').item(0)";
add_script += ".appendChild(global_script_pool['" + script.id + "']);\n";
window.setTimeout(add_script, s);
remove_script = "document.getElementsByTagName('head').item(0)";
remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n";
remove_script += "delete global_script_pool['" + script.id + "'];\n";
window.setTimeout(remove_script, s + 10000);
}

var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n";
end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n";
end_script += "}\n";
end_script += "else {\n";
end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
end_script += "innerhtml_lock = null;\n";
end_script += "}";
window.setTimeout(end_script, s);
}

在实际的应用中稍有修改。例如，对于第一次使用ajax所返回的HTML中的JS来修改所返回的HTML中的某个DIV，这样往往会看不到实际修改的结果。经研究发现，曾执行了两次写入操作。于此，只需要将修改操作的timeout的时间改长一点即可(即add_script的执行时间)。

HTML, Javascript ajax, HTML, innerHTML, Javascript, reponse, set_innerHTML, 添加新标签, ，