为什么innerHTML不执行脚本，我该如何修复它？

使用innerHTML编写脚本：浏览器执行限制的解决方法

为了尝试将脚本动态加载到网页中，开发人员可以利用HTML 元素的innerHTML 属性，例如

。然而，我们经常观察到，虽然脚本内容出现在页面的 DOM 中，但在 Firefox 和 Chrome 等浏览器中它仍未执行。

为了解决这个问题，我们设计了一种递归方法，可以有效地替换不可执行的脚本与可执行的对应物。下面概述的此方法可确保通过 innerHTML 插入时忠实执行：

function nodeScriptReplace(node) {
  if (nodeScriptIs(node)) {
    node.parentNode.replaceChild(nodeScriptClone(node), node);
  } else {
    var i = -1, children = node.childNodes;
    while (++i < children.length) {
      nodeScriptReplace(children[i]);
    }
  }

  return node;
}

function nodeScriptClone(node) {
  var script = document.createElement("script");
  script.text = node.innerHTML;

  var i = -1, attrs = node.attributes, attr;
  while (++i < attrs.length) {
    script.setAttribute((attr = attrs[i]).name, attr.value);
  }
  return script;
}

function nodeScriptIs(node) {
  return node.tagName === 'SCRIPT';
}

用法：通过在文档的 body 元素上调用 nodeScriptReplace() 方法，所有不可执行的脚本将被替换为它们的可执行对应项，实现无缝脚本执行：

nodeScriptReplace(document.getElementsByTagName("body")[0]);

该技术有效规避了通过innerHTML插入脚本执行时的浏览器限制，使开发人员能够根据需要动态加载和执行脚本。

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