使用动态脚本元素加载js

最新推荐文章于 2024-03-14 20:28:54 发布

ApeCoding

最新推荐文章于 2024-03-14 20:28:54 发布

阅读量605

点赞数

分类专栏： js 文章标签：动态脚本加载

本文链接：https://blog.csdn.net/qq_26394087/article/details/52251260

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

大概了解

这种技术通过动态创建<script>元素来加载js，重点在于无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
使用动态脚本元素下载文件时，返回的代码通常会立即执行（Firefox和Opera除外，它们等待此前所有动态脚本节点执行完毕）。在该脚本文件包含其他脚本调用的接口时，就会带来问题，所以你必须跟踪并确保脚本下载完成并准备就绪。

代码

<!doctype html>
    <head>
        <script>
            function loadJs(url,callback){
                var script = document.createElement("script");
                script.type = "text/javascript";

                if(script.readyState){//IE触发事件，通常只检测两种值，loaded,complete
                    script.onreadystatechange == function(){
                        if(script.readyState == "loaded" || script.readyState == "complete"){
                            script.onreadystatechange = null;//防止事件被处理两次
                            callback();
                        }
                    }
                }else{//其他浏览器在<script>元素接受完成时触发load事件
                    script.onload = function() {
                        callback();
                    }
                }

                script.src = url;
                document.getElementsByTagName('head')[0].appendChild(script);
            } 

            loadJs("test1.js",function() {
                loadJs("test2.js",function() {
                alert("all js are loaded");
            })
            })
        </script>
    </head>
    <body>
        <p>加载js</p>
    </body>
</html>