让innerHtml中的script跑起来

最新推荐文章于 2021-06-05 02:34:03 发布
最新推荐文章于 2021-06-05 02:34:03 发布
阅读量158 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wmnmtm/article/details/82923408
本文介绍了一种跨浏览器兼容的方法来设置innerHTML，确保插入的内容包括脚本和样式能在IE、Firefox和Opera等浏览器中正常工作。此外，还提供了解决HTML代码中包含document.write导致页面破坏的方案。

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

很多人都可能遇到过这种情况：设置 innerHTML 的时候，插入的 HTML 代码中包含脚本，但这些脚本却不生效，或者在 IE 上生效在其它浏览器上就不生效。原因很简单：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：

对于IE，首先 script 标签必须带 defer 属性，其次在插入时刻，innerHTML 的所属节点必须在 DOM 树中；对于 Firefox 和 Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。

根据上面结论，给出通用的设置 innerHTML 方法：

/* * 描述：跨浏览器的设置 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="true">'); 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); } }}

还有某些情况，我们事先不清楚要插入到 innerHTML 的 HTML 代码包含什么，如果包含 document.write 语句，那么就会破坏整个页面。对于这种情况，可以通过重新定义 document.write 来避免。代码如下：

/* * 描述：通过重定义 document.write 函数，避免在使用 setInnerHTML 时， * 插入的 HTML 代码中包含 document.write ，导致原页面受到破坏的情况。 */document.write = function() { var body = document.getElementsByTagName('body')[0]; for (var i = 0; i < arguments.length; i++) { argument = arguments[i]; if (typeof argument == 'string') { var el = body.appendChild(document.createElement('div')); setInnerHTML(el, argument) } }}

wmnmtm
关注
中国json地图的点击事件？
**My Coding Family**
02-05 1051
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！
让插入到 innerHTML 中的 script 跑起来
小马的专栏
01-18 841
http://www.coolcode.cn/show-117-1.html 
让插入到innerHTML中的script跑起来
lee576的专栏
11-20 3667
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让
让 innerHTML 进来的 script 代码跑起来
weixin_34184158的博客
03-17 295
今天来简单聊聊如何让 innerHTML 进来的 scrip 代码跑起来的问题。 前台请求一个接口，接口返回一些 HTML 标签拼接成的字符串，以供前端直接 innerHTML 生成 DOM 元素，这样的做法非常普遍。但是你是否遇到过，如果字符串中拼接的 HTML 标签中有 script 标签，那么该段脚本是无法执行的，这并不是 bug，而是 w3c 的文档规定的。 比如如下这段代码，innerH...
让innerHTML中的script脚本执行起来
胡杨的知识库
04-26 881
 在我们使用AJAX的时候，经常要用到innetHTML来更新对象的内容，但是对于更新的脚本程序浏览器却无法执行，我前面AJAX初学常遇问题解答这篇文章曾提到过这个问题，它不执行的原因是：标签只在浏览器第一次文档加载中被解析，下面介绍怎么样让跑起来。分析问题既然只在文档加载中才被解析，那么我就得调用document.write()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了
让插入到 innerHTML 中的 script 跑起来的代码第1/2页
12-03
总结起来，要使插入到`innerHTML`的`<script>`脚本在所有主流浏览器中都能正确执行，我们需要： 1. 检查并处理`defer`属性，确保脚本在适当的时候执行。 2. 分别处理外部脚本和内部脚本，确保它们被正确地创建和...
让插入到 innerHTML 中的 script 跑起来的代码
Everlasting丶幻的专栏
02-19 740
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们
让插入到 innerHTML 中的 script 跑起来的实现代码
zc2087的专栏
12-14 2724
<br />在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。这个问题在某些时候微不足道，甚至可以忽略，但有些时候，这个问题就非常严重，它很可能让我们的程序得不到预期的结果。因此我们需要解决这个问题。<br />如果你读过 MSDN，你会发现并非所有
html自动执行脚本,我要在innerHTML中执行script脚本
weixin_34247778的博客
06-05 1745
innerHTML执行js代码,向innerHTML中写入并执行script脚本并让他运行起来，通常网站用到innerHTML加载的js脚本网站script没有运行，要想让他远行的方法有2种。innerHTML中没有执行script脚本的原因分析：< script>标签只在浏览器第一次文档加载中被解析，要不就要不就要有事件去触发以前页面加载过的js函数或是方法。script脚本在inn...
在使用highlight.js的时候code标签前面有很多的缩进，这样就导致高亮的代码都跑到展示框的右边了该如何解决，给出具体代码
最新发布
08-09
### 回答1： 可以在使用highlight.js之前先对代码进行处理去除多余的缩进。可以使用javascript的replace()方法将每一行前面的缩进都去掉。 具体代码如下: ``` var code = document.getElementById("code").innerHTML; code = code.replace(/^\s+/gm, ""); document.getElementById("code").innerHTML = code; ``` 在这段代码中，首先通过getElementById()方法获取到代码所在的标签，再使用replace()方法将其中每一行前面的缩进都替换为空字符。最后再将处理后的代码重新赋值给标签。 ### 回答2： 在使用highlight.js时，如果code标签前面有很多缩进，导致高亮的代码跑到展示框的右边，可以通过以下方法解决： 首先，在需要使用highlight.js的页面中添加CSS样式，将code标签的padding设置为0，并设置white-space属性为pre-wrap。这样可以去除代码块前面的缩进，并保持代码在展示框内部显示。 ```css <style> code { padding: 0; white-space: pre-wrap; } </style> ``` 接下来，在使用highlight.js的代码块中加入自定义的CSS类名，例如"code-highlight"： ```html <pre><code class="code-highlight"> <!-- 在此处插入需要高亮的代码 --> </code></pre> ``` 最后，使用highlight.js的JavaScript库来对该代码块进行高亮处理： ```html <script src="path/to/highlight.min.js"></script> <script> // 引入其他需要高亮的语言库 hljs.registerLanguage('language', languageModule); // 对所有带有class="code-highlight"的代码块进行高亮处理 document.querySelectorAll('code.code-highlight').forEach((block) => { hljs.highlightBlock(block); }); </script> ``` 通过上述方法，将代码块前面的缩进去除，并保持高亮的代码在展示框内显示，解决了高亮代码跑到展示框右边的问题。 ### 回答3： 在使用highlight.js时，code标签前面出现很多的缩进是由于使用了pre标签或某个父级容器添加了额外的缩进或样式。这个问题可以通过设置CSS样式来解决。 首先，要确保代码嵌套在正确的HTML结构中。需要使用pre标签将代码包裹起来，并在pre标签内使用code标签。例如： ```html <pre> <code class="language-javascript"> // 你的代码 </code> </pre> ``` 接下来，我们可以在CSS中定义样式来调整代码的缩进。通过对pre和code标签应用样式来解决这个问题。例如： ```css pre { margin: 0; /* 移除pre标签的外边距 */ padding: 0; /* 移除pre标签的内边距 */ } pre code { display: block; /* 将code标签显示为块级元素 */ white-space: pre; /* 保持代码中的空白符和换行符原样显示 */ margin: 0; /* 移除code标签的外边距 */ padding: 1em; /* 添加适当的内边距来调整代码缩进 */ background-color: #f7f7f7; /* 可选：设置代码块的背景颜色 */ } ``` 通过以上样式，我们可以将代码块的缩进问题解决掉，确保代码在展示框中正确显示。根据需要可以调整padding的数值以达到适当的缩进效果，也可以根据喜好设置代码块的背景颜色。