为什么innerHTML 中的脚本不执行，如何修复？-js教程-PHP中文网

为什么innerHTML 中的脚本不执行，如何修复？

Linda Hamilton

发布： 2024-12-20 12:43:17

原创

851 人浏览过

Why Don't Scripts in innerHTML Execute, and How Can I Fix It?

如何执行使用innerHTML插入的脚本？

当使用innerHTML将内容注入到元素中时，内容中包含的脚本可能不会被执行自动执行。出现这种情况是因为浏览器在使用innerHTML插入脚本后不会对其进行评估。

解决方案：

要解决此问题，您可以使用 JavaScript 重新创建每个脚本元素手动并替换 DOM 中的原始脚本标签。这是 ES6 中的解决方案：

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);
    });
}

登录后复制

用法：

.innerHTML = HTML; // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

登录后复制

以上是为什么innerHTML 中的脚本不执行，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！