為什麼innerHTML 中的腳本不執行，如何修復？

如何執行使用innerHTML插入的腳本？

當使用innerHTML將內容注入到元素中時，內容中包含的腳本可能不會被執行自動執行。發生這種情況是因為瀏覽器在使用innerHTML插入腳本後不會對其進行評估。

解決方案：

要解決此問題，您可以使用 JavaScript 重新建立每個腳本元素手動並替換 DOM 中的原始腳本標籤。這是 ES6 中的解：

function setInnerHTML(elm, html) {
  elm.innerHTML = html;

  Array.from(elm.querySelectorAll("script"))
    .forEach(oldScriptEl => {
      const newScriptEl = document.createElement("script");

      Array.from(oldScriptEl.attributes).forEach(attr => {
        newScriptEl.setAttribute(attr.name, attr.value);
      });

      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);

      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
    });
}

用法：

.innerHTML = HTML; // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

以上是為什麼innerHTML 中的腳本不執行，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！