动态加载外部链接JS

最新推荐文章于 2024-01-22 19:59:14 发布

刘元涛

最新推荐文章于 2024-01-22 19:59:14 发布

阅读量1.4k

点赞数

分类专栏： Javascript Web前端文章标签： javascript web前端

本文链接：https://blog.csdn.net/u013510614/article/details/37723523

版权

Javascript 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

Web前端

34 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html">
    <title>面试题</title>
</head>
<body>
    <form action="" id="aForm">
        <input type="checkbox" value="a.js">
        <input type="checkbox" value="b.js">
        <input type="checkbox" value="c.js">
        <input type="checkbox" value="d.js">
        <input type="submit" value="提交">
    </form>
    <script type="text/javascript">
        /*
        // 1.提交表单时按勾选的复选框加载外部JS
        // 2.当所有代码加载完成后alert("Done")
        */
        var aForm = document.getElementById("aForm");
        var theInputs = aForm.elements;
        var checkedNum = 0;
        var checkedJsSrc = new Array();
        
        //禁止表单自动提交
        aForm.onsubmit = function(){
            return false;
        }
        
        //给提交按钮添加事件
        for(i = 0; i < theInputs.length; i++){
            if(theInputs[i].type == "submit"){
                theInputs[i].onclick = function(){
                    for(j = 0; j < theInputs.length; j++){
                        if(theInputs[j].type == "checkbox" && theInputs[j].checked){
                            checkedNum++;
                            checkedJsSrc.unshift(theInputs[j].value);
                        }
                    }
                    loadJs(checkedNum);
                }
            }
        }        
        
        //输出Done
        function sayDone(){
            alert("Done");
            aForm.submit();
        }
        
        //加载外部JS
        function loadJs(aNum){
            var domScript = document.createElement("script");
            var loadJsNum = aNum;
            domScript.type = "text/javascript";


            if(loadJsNum <= 1){
                domScript.onloadDone = false;
                domScript.src = checkedJsSrc[0];
                domScript.onload = function (){
                    domScript.onloadDone = true;
                    sayDone();
                }
                domScript.onreadystatechange = function(){
                    if(("loaded" === domScript.readyState || "complete" === domScript.readyState) && !domScript.onloadDone){
                        domScript.onloadDone = true;
                        sayDone();
                    }
                }
            }
            else
            {
                domScript.onloadDone = false;
                domScript.src = checkedJsSrc[loadJsNum - 1];
                domScript.onload = function (){
                    domScript.onloadDone = true;
                    loadJs(loadJsNum - 1);
                }
                domScript.onreadystatechange = function(){
                    if(("loaded" === domScript.readyState || "complete" === domScript.readyState) && !domScript.onloadDone){
                        domScript.onloadDone = true;
                        loadJs(loadJsNum - 1);
                    }
                }
            }
            document.getElementsByTagName("head")[0].appendChild(domScript);
        }
    </script>
</body>
</html>