為什麼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中文網其他相關文章！