在 JavaScript 中使用「innerHTML」時如何確保腳本執行？

執行使用.innerHTML 插入的腳本

使用innerHTML 將內容插入到元素中可能會遇到插入內容中的腳本不執行的問題。雖然有使用 jQuery 或 eval 的解決方案，但以下是使用純 JavaScript 解決此問題的程式碼片段：

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);
  });
}

此函數採用元素和 HTML 字串作為參數。它用提供的字串替換元素的innerHTML，並迭代HTML 中的任何腳本元素。對於每個腳本元素，它都會建立一個具有相同屬性和腳本文字的新元素。最後，它用新的腳本元素取代舊的腳本元素。

要使用此功能，只需設定元素的innerHTML：

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

以上是在 JavaScript 中使用「innerHTML」時如何確保腳本執行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！