為什麼使用innerHTML插入的腳本總是不執行，我該如何修復它？

執行使用innerHTML插入的腳本

使用innerHTML將腳本插入網頁可能是一個挑戰，因為腳本可能出現在DOM中，但執行失敗。這是由於瀏覽器在動態新增至頁面時處理腳本執行的方式不同。

為了克服這個問題，一種方法涉及遞歸搜尋 DOM 中的腳本元素並將其替換為可執行複製。以下是遞歸腳本替換函數的逐步說明：

function nodeScriptReplace(node) {

• 此函數將節點作為參數並檢查它是否是腳本元素（即，其 tagName 是 ' SCRIPT')。
• 如果它是一個腳本元素，它將用包含相同程式碼的克隆來取代它（透過nodeScriptClone())。
• 如果它不是腳本元素，它將遞歸地在節點的子節點中搜尋任何腳本元素。

function nodeScriptClone(node) {

• 此函數會建立一個新的script 元素的文字（程式碼）與原始腳本節點的程式碼相符。
• 它還將原始節點中的所有屬性複製到克隆以保留“src”屬性等任何設定。

function nodeScriptIs(node) {

• 此函數充當幫助程序，透過檢查節點的 tagName 來確定節點是否為腳本元素。

用法範例：

執行插入的腳本使用innerHTML，在文件主體（或任何其他所需容器）上呼叫nodeScriptReplace()函數。

nodeScriptReplace(document.getElementsByTagName("body")[0]);

透過利用這種遞歸方法，搜尋過程中遇到的所有腳本元素都將被替換為可執行克隆，確保使用innerHTML插入時正確執行腳本。

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