如何執行透過.innerHTML新增的內嵌腳本？

執行透過 .innerHTML 插入的內聯腳本

問：如何使用 .innerHTML 屬性執行插入到元素中的腳本？

A：要執行透過.innerHTML 插入的腳本，請依照下列步驟操作步驟：

1. 建立新函數：定義一個名為setInnerHTML 的函數，函數接受兩個參數：HTML 元素(elm) 和要插入的HTML 內容(html)。
2. 插入HTML：設定元素的innerHTML為指定的HTML
3. 擷取腳本元素：擷取所有<script> 的陣列修改後的HTML內容中的元素。 </script>

4. 迭代腳本：循環遍歷<script>；元素並為每個腳本執行以下步驟：</script>

   • 建立一個新的<script> </script>
   • 從原始<script> 複製屬性</script>
   • 建立一個文字節點，其中包含原始<script>的innerHTML元素並將其附加到新的 script 元素。 </script>
   • 取代原來的 <script> 元素DOM 中的元素與新元素。 </script>
5. 範例：增強函數以包含其用法範例：

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

  // Simplified for clarity (not part of the setInnerHTML function)
  const htmlWithScript = "<script type='"text/javascript"'>alert('test');</script><strong>test</strong>";
  setInnerHTML(document.querySelector('div'), htmlWithScript);
}

用法：要使用該功能，只需提供HTML 元素以及包含腳本的HTML 內容。腳本將在插入 DOM 後自動執行。

該技術繞過了直接分配給 innerHTML 的限制，並允許成功執行動態插入的內聯腳本。

以上是如何執行透過.innerHTML新增的內嵌腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！