DOM编程——动态脚本

[Toc]

创建script元素对象,赋值src属性来调用指定的脚本

<body>
    <!-- 动态脚本 -->
    <script>
        let oScript = document.createElement("script")
        oScript.src = './test8.js'
        document.body.appendChild(oScript)
    </script>
</body>

封装loadScript函数

  • 通过传入参数src来在文档里调用指定的脚本
        function loadScript(src) {
            let oScript = document.createElement('script')
            oScript.src = './' + src
            document.body.appendChild(oScript)
        }
        loadScript('test8.js')

通过嵌入源代码的方式动态加载脚本

        let oScript = document.createElement('script')
        oScript.appendChild(document.createTextNode('alert(\'xxx\')'))
        document.body.appendChild(oScript)
  • IE10需要将let修改为var
  • IE8以及以下不支持运行这段代码
  • innerText与innerHTML也同样可以代替document.createTextNode()

旧版IE兼容性嵌入源代码

  • 通过.text属性添加代码,适配IE8以及以下的浏览器

  •         var oScript = document.createElement('script')
            oScript.text = 'alert(\'xxx\')'
            document.body.appendChild(oScript)
    

跨浏览器函数

        function loadScriptString(codeStr) {
            var oScript = document.createElement('script')
            oScript.type = 'text/javascript'
            try {
                oScript.appendChild(document.createTextNode(codeStr))
            } catch (err) {
                oScript.text = codeStr
            }
            document.body.appendChild(oScript)
        }

        var codeStr = 'alert(\'xxx\')'
        loadScriptString(codeStr)

通过innerHTML属性创建的<script>永不执行

  • 需要区分这里指的是通过innerHtml创建<script>元素

    •     <script>
              document.body.innerHTML = '<script>alert(\'xxx\')<\/script>'
          </script>
      
    • 浏览器会创建<script>元素以及文本,但是js引擎会给其打上“永不执行”的标签,js引擎不会执行这些代码也不允许通过任何方式强制执行。


10.15

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文整理自《高级javascript程序设计》 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用...
    SuperSnail阅读 3,741评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,328评论 1 45
  • 节点层次 DOM 可以将任何 HTML 和 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每...
    云之外阅读 3,520评论 0 1
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,262评论 0 3
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,749评论 28 53

友情链接更多精彩内容