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

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

为什么不能执行?

官方文档规定的,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>
本文地址:http://www.yerenwz.com/4846.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论