【Javascript】innerHTML中的script不执行的解决办法

默认情况下，使用innerHTML操作dom中的内容时，加入的innerHTML中包括的script脚本会被加入但是不会被解析执行，如下所示

提示：你可以先修改部分代码再运行。

在一些情况下，当innerHTML中包含script脚本时希望它能执行起来。

解决的思路是对innerHTML进行手动解析并执行，然后把剩下的html放回innerHTML。

Ma Bingyao同学对上面的操作做了个封装，用起来很简洁，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>枫芸志</title> <script> /* 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); } </script> </head><body> <div id="container"> something </div> <p><a href="http://witmax.cn">枫芸志</a></p> <script> var html = "<" + "script>alert('running...');<" +"/script>added"; set_innerHTML("container", html, 0); </script> </body></html>

提示：你可以先修改部分代码再运行。

[完毕]

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【Javascript】innerHTML中的script不执行的解决办法》

标签： Javascript

已经有11 条评论抢在你前面了~

沙发
大猫猫 2010年10月17日下午6:00

直接eval()一下不就好了，干嘛这么麻烦

[回复]
晴枫 10月 17th, 2010 下午6:07 回复:
@大猫猫, 脚本异步加载，夹杂在html之中的话就不能直接eval了

[回复]
板凳
shy9000 2010年6月28日下午9:35

看PHP没有任何问题的我,看到JS就是一脸茫然…
=.=

[回复]
晴枫 6月 28th, 2010 下午9:37 回复:
@shy9000, 平时JS碰到的问题比PHP多常规用用觉得PHP听傻瓜的

[回复]
shy9000 6月 28th, 2010 下午10:12 回复:
@晴枫,
的确,PHP编程起来确实没JS那么麻烦…

[回复]
晴枫 6月 28th, 2010 下午10:25 回复:
@shy9000, JS牵扯到浏览器兼容性的时候最麻烦，服务器端的程序就没这破事

[回复]
shy9000 6月 28th, 2010 下午10:27 回复:
@晴枫, 呵呵,头痛的IE6呀,抓狂状态了.
啥时候IE6能淘汰就好了,现在写模板就怕IE6.

[回复]
晴枫 6月 28th, 2010 下午10:31 回复:
@shy9000, 当办公机都换成Win7的时候，IE6自然就消亡了，不过似乎长路漫漫….

[回复]
shy9000 6月 28th, 2010 下午10:32 回复:
@晴枫, 估计够呛,至少4-5年.

[回复]
热心网友 2月 23rd, 2022 下午1:53 回复:
大佬们，现在是2022年，ie6已经灭亡了，你们还在吗

[回复]
adsf 1月 28th, 2024 下午2:52 回复:
大神

[回复]

枫芸志

枫芸志

【Javascript】innerHTML中的script不执行的解决办法

已经有11 条评论抢在你前面了~

点击这里取消回复。