Ajax中动态执行返回到innerHTML中的scripts代码

2019独角兽企业重金招聘Python工程师标准>>>

搜索网络上的一些文章之后，得到一个新的方法，是利用ie本身的机制来执行的。即当节点被移除的时候，ie会重新解析节点内部的html，有脚本则会执行相关的脚本，不过这里面的脚本必须设置defer属性才可以。新方法如下：

/*   * 描述：跨浏览器的设置 innerHTML 方法   *       允许插入的 HTML 代码中包含 script 和 style   * 作者：kenxu <ken@ajaxwing.com>   * 日期：2006-03-23   * 参数：   *    el: 合法的 DOM 树中的节点   *    htmlCode: 合法的 HTML 代码   * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+   */ var setInnerHTML = function (el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
htmlCode = htmlCode.replace(/<script([^>]*)>/gi, '<script$1 defer>');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
} else { var el_next = el.nextSibling; var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode; if (el_next) {
el_parent.insertBefore(el, el_next)
} else {
el_parent.appendChild(el);
}
}
}

此方法充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。还有另外一个方法如下：

/* innerhtml.js   * Copyright Ma Bingyao <andot@ujn.edu.cn>   * Version: 1.9   * LastModified: 2006-06-04   * This library is free.  You can redistribute it and/or modify it.   * http://www.coolcode.cn/?p=117   */ 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);
}

转载于:https://my.oschina.net/syso4yy/blog/609233