使用innerHTML后如何保证内联脚本执行？

使用innerHTML执行内联脚本的技术

使用innerHTML将脚本插入网页有其局限性。虽然脚本可能出现在 DOM 中，但它通常无法自动执行。要解决此问题并在插入时启用脚本执行，可以采用某些方法。

方法：递归替换脚本

此方法涉及将每个内联脚本元素替换为可执行对应项。以下代码片段演示了实现：

function nodeScriptReplace(node) {
  if (nodeScriptIs(node) === true) {
    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';
}

用法示例：

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

此方法递归遍历 DOM 树，识别内联脚本元素并将其替换为可执行的，确保脚本按预期执行。

以上是使用innerHTML后如何保证内联脚本执行？的详细内容。更多信息请关注PHP中文网其他相关文章！