如何确保使用 .innerHTML 执行动态插入的脚本？

使用 .innerHTML 评估动态插入的脚本

如果内容包含 <script>，则使用 .innerHTML 将内容插入网页有时会导致问题。元素。这是因为这些元素中的脚本代码可能不会自动执行。</script>

为了解决这个问题，我们可以显式执行这些脚本。让我们探索如何在 JavaScript 中执行此操作：

ES6 实现：

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 = HTML; // Does not run <script> tags in HTML
setInnerHTML(, HTML); // Runs <script> tags in HTML

该脚本遍历新插入的内容，定位到<script>元素，并创建新的 <script>元素及其属性和代码。然后它会替换原来的 <script>包含这些新元素的元素，确保脚本代码得到执行。</script>

以上是如何确保使用 .innerHTML 执行动态插入的脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！