innerHTML 插入 <script> 脚本正确执行的处理方式

最新推荐文章于 2023-10-18 22:51:26 发布
转载 最新推荐文章于 2023-10-18 22:51:26 发布 · 495 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/jsan/blog/168621
文章标签：

#javascript #ViewUI

本文介绍了解决通过innerHTML动态插入的JavaScript代码无法执行的问题。提供了两种方法：一种是利用IE浏览器特性确保脚本执行；另一种是通过创建脚本元素并管理其生命周期来实现跨浏览器兼容性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

为什么80%的码农都做不了架构师？>>>   hot3.png

很多时候需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。 

原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。 

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

/**  
 * 描述：跨浏览器的设置 innerHTML 方法 (允许插入的 HTML 代码中包含 script 和 style )
 * 作者：kenxu <ken@ajaxwing.com>  
 * 日期：2006-03-23  
 * 参数：  
 *    el: 合法的 DOM 树中的节点  
 *    htmlCode: 合法的 HTML 代码  
 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+  
 * 此方法充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。
 */
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,
			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/jsan/blog/168621

让innerHTML中的script脚本执行起来
html基础教程
02-22 2416
下面介绍怎么样让<script>跑起来。 分析问题 既然<script>只在文档加载中才被解析，那么我就得调用document.write()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把document.write()装载起来。 解决问题 <span style="color:#333333"> var js...
执行 innerHTML 里的 <script>
weixin_33681778的博客
03-17 224
原文：执行 innerHTML 里的 &lt;script&gt; 背景 有时候我们会有把一整段 HTML 动态塞进页面的需求，例如渲染了一个模板，从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可。但是当 HTML 中出现 script 标签时，直接使用 innerHTML 并不会执行它。 一个例子   &lt;div id="test"&gt;H...
让插入到innerHTML中的script跑起来
lee576的专栏
11-20 3667
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让
InnerHtml注入JavaScript的问题
jimmyleeee的专栏
02-18 1685
最近做一个小测试，就是在标签的innerHTML中注入一段script脚本， 测试代码如下： <html> <body> <div id="div1"></div> </body> <script type="text/javascript"> var data = "{{{data}}}"; var objDiv = document.getElementById("div1"); o
<script>标签的加载解析执行
weixin_33759269的博客
08-26 215
看了很多网上的文章，都是大同小异。总结一下。内部原理还没有搞清楚，有机会再学习。 一、<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容（直接写入或者引用外部文件都一样）是以顺序加载执行的，每个<script>标记内容可以当成一个独立的块，同步的情况下一个块加载解析然后执行完后才加载下一块。当然这时也会阻塞其他页面元素的加载...
html能用小脚本吗,可以使用innerHTML插入脚本吗？
weixin_39983563的博客
06-27 129
GCT1015这是一个递归替换所有可执行脚本的方法：functionnodeScriptReplace(node){if(nodeScriptIs(node)===true){node.parentNode.replaceChild(nodeScriptClone(node),node);}el...
让插入到 innerHTML 中的 script 跑起来的代码
Everlasting丶幻的专栏
02-19 740
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们
ajax中指定innerHTML时如何应用其中的SCRIPT
blackant2的专栏
08-09 954
示例代码 function load1(){var Content= document.getElementById("Content");alert("load1");}function load2(){var Content= document.getElementById("Content");Content.innerHTML="load2:load1();";}function
执行innerHTML中script里面的内容
qq_45888781的博客
02-15 291
最近使用iframe引入一个页面，这个页面数据是后端接口返回一个html文件，通过innerHTML将该文件放入body中，并执行script中的内容，但script中的内容并不会被执行，用了eval（）函数去解决了这个问题。
html script触发,用 innerHTML 写入 script 标签不触发请求。
weixin_39946266的博客
06-20 186
This one was trivial.As stated in spec (8.4 Parsing HTML fragments and 8.2.3.5 Other parsing state flags,) quote:when using innerHTML the browser will1.Create a new Document node, and mark it as being...
执行 innerHTML 里的 script
weixin_34221332的博客
03-17 285
背景 有时候我们会有把一整段 HTML 动态塞进页面的需求，例如渲染了一个模板，从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可。但是当 HTML 中出现 script 标签时，直接使用 innerHTML 并不会执行它。 一个例子 &lt;div id="test"&gt;Hello HTML&lt;/div&gt; &lt;script&gt; ...
html自动执行脚本,我要在innerHTML中执行script脚本
weixin_34247778的博客
06-05 1747
innerHTML执行js代码,向innerHTML中写入并执行script脚本并让他运行起来，通常网站用到innerHTML加载的js脚本网站script没有运行，要想让他远行的方法有2种。innerHTML中没有执行script脚本的原因分析：< script>标签只在浏览器第一次文档加载中被解析，要不就要不就要有事件去触发以前页面加载过的js函数或是方法。script脚本在inn...
javascript 中innerHTML的用法
热门推荐
美丽的大黄人
06-25 1万+
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容 例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性
繁依Fanyi的博客
10-18 3009
在深入研究innerHTML属性之前，让我们先了解一下什么是DOM。DOM 是文档对象模型的缩写，它是HTML文档的编程接口，允许开发者通过编程方式访问、操作和更新HTML文档的内容和结构。DOM 将HTML文档表示为一个树状结构，每个HTML元素都是树中的一个节点，我们可以使用JavaScript来访问和修改这些节点。innerHTML是DOM元素的一个属性，它代表了该元素的HTML内容。也就是说，它包含了一个HTML元素的所有子元素、文本和标记。通过innerHTML。
任务描述 本关任务：使用 document.write 在页面显示 <h1>网页制作常用工具</h1><ul><li>图像处理Photoshop工具</li><li>网页编辑Dreamweaver工具</li></ul>编程要求 使用 document.write 在页面显示 <h1>网页制作常用工具</h1><ul><li>图像处理Photoshop工具</li><li>网页编辑Dreamweaver工具</li></ul><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>prompt方法</title> <script type="text/javascript"> /***请在此处书写代码****/ /**********Begin**********/ /**********End**********/ </script> </head> <body> </body> </html>
最新发布
05-28
### 如何使用 JavaScript 的 `document.write` 方法在网页中输出包含标题和列表的 HTML 结构 `document.write` 是 JavaScript 中的一个方法，用于向 HTML 输出流写入内容。通过该方法，可以动态生成并插入 HTML 标记到页面中[^2]。下面是一个示例代码，展示如何使用 `document.write` 方法在网页中输出一个包含标题和列表的结构： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document Write 示例</title> <script> document.write("<h1>这是标题</h1>"); // 输出标题标签 <h1> document.write("<ul>"); // 开始无序列表 document.write("<li>列表项 1</li>"); // 列表项 1 document.write("<li>列表项 2</li>"); // 列表项 2 document.write("<li>列表项 3</li>"); // 列表项 3 document.write("</ul>"); // 结束无序列表 </script> </head> <body> </body> </html> ``` 上述代码将生成一个包含标题和列表的 HTML 页面。`document.write` 方法会直接将指定的字符串作为 HTML 内容写入到文档中[^4]。 需要注意的是，当页面加载完成后再次调用 `document.write` 方法时，可能会覆盖整个文档的内容[^1]。因此，在实际开发中需要谨慎使用此方法，尤其是在用户交互后动态生成内容时，推荐使用 DOM 操作（如 `innerHTML` 或 `appendChild`）来替代 `document.write`。 此外，如果需要换行显示内容，不能直接使用 `\n`，而应使用 HTML 的 `<br>` 标签来实现换行效果[^3]。 ### 注意事项 - `document.write` 方法仅适用于同步脚本执行环境。如果在异步脚本中使用，可能会导致页面内容被清空。 - 在现代 Web 开发中，建议避免使用 `document.write`，因为它可能导致性能问题以及维护困难。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值