如何执行通过.innerHTML添加的内联脚本？-js教程-PHP中文网

如何执行通过.innerHTML添加的内联脚本？

Mary-Kate Olsen

发布： 2024-12-11 02:50:13

原创

350 人浏览过

How to Execute Inline Scripts Added via .innerHTML?

执行通过 .innerHTML 插入的内联脚本

问：如何使用 .innerHTML 属性执行插入到元素中的脚本？

A：要执行通过 .innerHTML 插入的脚本，请按照以下步骤操作步骤：

创建新函数：定义一个名为 setInnerHTML 的函数，该函数接受两个参数：HTML 元素 (elm) 和要插入的 HTML 内容 (html)。
插入HTML：设置元素的innerHTML为指定的HTML
提取脚本元素：检索所有 <script> 的数组修改后的 HTML 内容中的元素。</script>
迭代脚本：循环遍历 <script>；元素并为每个脚本执行以下步骤：</script>
- 创建一个新的 <script> </script>
- 从原始 <script> 复制属性</script>
- 创建一个文本节点，其中包含原始 <script> 的innerHTML元素并将其附加到新的 script 元素。</script>
- 替换原来的 <script> 元素DOM 中的元素与新元素。</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);
  });

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

登录后复制