首页 >web前端 >js教程 >为什么innerHTML不执行脚本,我该如何修复它?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-25 08:40:10232浏览

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

使用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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn