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

执行使用 .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中文网其他相关文章！