如何执行通过.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);
}

6. 用法：要使用该功能，只需提供 HTML 元素以及包含脚本的 HTML 内容。脚本将在插入 DOM 后自动执行。

该技术绕过了直接分配给 innerHTML 的限制，并允许成功执行动态插入的内联脚本。

以上是如何执行通过.innerHTML添加的内联脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！