執(zhí)行通過 .innerHTML 插入的內(nèi)聯(lián)腳本

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

A：要執(zhí)行通過 .innerHTML 插入的腳本，請按照以下步驟操作步驟：

1. 創(chuàng)建新函數(shù)：定義一個名為 setInnerHTML 的函數(shù)，該函數(shù)接受兩個參數(shù)：HTML 元素 (elm) 和要插入的 HTML 內(nèi)容 (html)。
2. 插入HTML：設(shè)置元素的innerHTML為指定的HTML
3. 提取腳本元素：檢索所有 <script> 的數(shù)組修改后的 HTML 內(nèi)容中的元素。</script>

4. 迭代腳本：循環(huán)遍歷 <script>；元素并為每個腳本執(zhí)行以下步驟：</script>

   • 創(chuàng)建一個新的 <script> </script>
   • 從原始 <script> 復(fù)制屬性</script>
   • 創(chuàng)建一個文本節(jié)點，其中包含原始 <script> 的innerHTML元素并將其附加到新的 script 元素。</script>
   • 替換原來的 <script> 元素DOM 中的元素與新元素。</script>
5. 示例：增強(qiáng)函數(shù)以包含其用法示例：

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=&quot;text/javascript&quot;>alert('test');</script><strong>test</strong>";
  setInnerHTML(document.querySelector('div'), htmlWithScript);
}

6. 用法：要使用該功能，只需提供 HTML 元素以及包含腳本的 HTML 內(nèi)容。腳本將在插入 DOM 后自動執(zhí)行。

該技術(shù)繞過了直接分配給 innerHTML 的限制，并允許成功執(zhí)行動態(tài)插入的內(nèi)聯(lián)腳本。

以上是如何執(zhí)行通過.innerHTML添加的內(nèi)聯(lián)腳本？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！