为什么使用 .innerHTML 时脚本不执行，如何修复？-js教程-PHP中文网

为什么使用 .innerHTML 时脚本不执行，如何修复？

DDD

发布： 2024-12-14 17:37:11

原创

674 人浏览过

Why Don't Scripts Execute When Using .innerHTML, and How Can I Fix It?

执行插入的 <script>带有 .innerHTML</script>

的元素当注入包含 <script> 的内容时使用 .innerHTML 标记到元素中时，脚本通常无法执行。这个问题的出现是由于 .innerHTML 的固有性质，它会插入静态 HTML，从而阻止浏览器自动评估其中的脚本。</script>

为了解决这个问题，解决方案包括直接操作注入的 HTML，创建一个动态进程模仿浏览器对 <script> 的默认行为elements.</script>

一种用 ES6 编写的方法，专注于使用纯 JavaScript，无需外部库或复杂的 DOM 修改。它迭代所有的 <script> 。注入内容中的元素，创建具有相同属性和文本内容的新元素。</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);
  });
}

登录后复制

要使用此解决方案，只需将当前的 .innerHTML 赋值替换为对 setInnerHTML 的调用即可。更新后的代码如下所示：

.innerHTML = HTML;    // does *NOT* run `<script>` tags in HTML
setInnerHTML(, HTML); // does run `<script>` tags in HTML

登录后复制

以上是为什么使用 .innerHTML 时脚本不执行，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！