首页 > web前端 > js教程 > 在 JavaScript 中使用'innerHTML”时如何确保脚本执行?

在 JavaScript 中使用'innerHTML”时如何确保脚本执行?

Linda Hamilton
发布: 2024-12-11 10:55:10
原创
817 人浏览过

How Can I Ensure Scripts Execute When Using `innerHTML` in JavaScript?

执行使用 .innerHTML 插入的脚本

使用 innerHTML 将内容插入到元素中可能会遇到插入内容中的脚本不执行的问题。虽然存在使用 jQuery 或 eval 的解决方案,但下面是使用纯 JavaScript 解决此问题的代码片段:

function setInnerHTML(elm, html) {
  elm.innerHTML = html;

  Array.from(elm.querySelectorAll("script"))
    .forEach(oldScriptEl => {
      const newScriptEl = document.createElement("script");

      Array.from(oldScriptEl.attributes).forEach(attr => {
        newScriptEl.setAttribute(attr.name, attr.value);
      });

      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);

      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
  });
}
登录后复制

此函数采用元素和 HTML 字符串作为参数。它用提供的字符串替换元素的innerHTML,并迭代HTML 中的任何脚本元素。对于每个脚本元素,它都会创建一个具有相同属性和脚本文本的新元素。最后,它用新的脚本元素替换旧的脚本元素。

要使用此功能,只需设置元素的innerHTML:

.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML
登录后复制

以上是在 JavaScript 中使用'innerHTML”时如何确保脚本执行?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板