使用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中文網其他相關文章！