為什麼使用 .innerHTML 時腳本不執行，如何修復？

執行插入的<script>帶有.innerHTML</script>

的元素當注入包含<script> 的內容時使用.innerHTML 標記到元素中時，腳本通常無法執行。這個問題的出現​​是由於 .innerHTML 的固有性質，它會插入靜態 HTML，從而阻止瀏覽器自動評估其中的腳本。 </script>

為了解決這個問題，解決方案包括直接操作注入的HTML，創建一個動態進程模仿瀏覽器對<script> 的預設行為elements.</script>

一種用ES6 編寫的方法，專注於使用純JavaScript，無需外部程式庫或複雜的DOM 修改。它迭代所有的 <script> 。注入內容中的元素，建立具有相同屬性和文字內容的新元素。 </script>

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 賦值替換為 setInnerHTML 的呼叫即可。更新後的程式碼如下：

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

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