解决使用innerHTML插入script标签不能执行的问题

原创 野人  2021-10-16 09:01  阅读 197 次

为什么不能执行？

官方文档规定的，HTML 5 中指定不执行由innerHTML插入的【script】标签。

效果的就是能插入进去，但是不执行，因为被解析成一段纯文字了。

怎么解决？

原理就是，用document的createElement()方法创建一个script元素，然后动态的插入对应的元素中，具体列子如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="test"></div>
    <button onclick="dynamicInsertScript()">动态插入script标签</button>
    <script>
      function createScript(param) {
        let sc = document.createElement("script");
        sc.innerHTML = `alert(${param})`;
        return sc;
      }

      function dynamicInsertScript() {
        let ele = document.querySelector(".test");
        ele.appendChild(createScript(Math.random()));
      }
    </script>
  </body>
</html>

本文地址：https://www.yerenwz.com/4846.html
版权声明：本文为原创文章，版权归 野人 所有，欢迎分享本文，转载请保留出处！

发表评论