动态加载js-阿里云开发者社区

动态加载js

2016-05-11 1577

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

1,如何动态加载js文件,并且加载完成之后调用其中的函数呢?

   Js代码  
    
  
function loadJs(url, callback) {  
    var done = false;  
    var script = document.createElement('script');  
    script.type = 'text/javascript';//do not 'application/javascript',because Low version of the browser is not compatible  
    script.language = 'javascript';  
    script.charset = "utf-8";  
    script.src = url;  
    //script.setAttribute('src', url);  
    script.onload = script.onreadystatechange = function () {  
        if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {  
            done = true;  
            script.onload = script.onreadystatechange = null;  
            if (callback) {  
                console.log('load '+url+' success.');  
                callback.call(script);  
            }  
        }  
    };  
    document.getElementsByTagName("head")[0].appendChild(script);  
};  

loadJs 功能:

动态加载js文件,即异步加载js文件,

并且在回调函数中可以调用该js文件中的函数或变量

实例:

   Html代码  
    
  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        ul, li {  
            /*list-style: outside none none;*/  
            list-style-type: none;  
            margin-left: 0;  
        }  
  
        li label {  
            width: 20%;  
            float: left; /* It is necessary */  
        }  
  
  
  
        li.button {  
            text-align: center;  
            margin-left: -40px;  
        }  
  
        input.errorBorder {  
            border: solid 1px #ff0000;  
        }  
    </style>  
    <script type="text/javascript" src="page.js"  ></script>  
    <script type="text/javascript" src="jquery-1.11.1.js"  ></script>  
    <script type="text/javascript" src="common_util.js"  ></script>  
  
</head>  
<body>  
<form action="">  
    <ul style="width: 400px">  
        <li>  
            <label for="username">用户名</label><input id="username"  type="text"/> <span>用户名不能为空</span>  
        </li>  
        <li>  
            <label for="password">密码</label><input id="password" type="text"/>  
        </li>  
  
    </ul>  
</form>  
<script type="text/javascript">  
    loadJs('jplaceholder.js', function () {  
        $('#username').placeholder({  
            word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 3, minLen: 2, errorBorderClass: 'errorBorder',  
            keyup_callback: function () {  
                console.log('keyup_callback');  
            },keydown_callback: function () {  
                console.log('keydown...');  
            }  
        });  
        $('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {  
            console.log('callback');  
        });  
    });  
  
  
</script>  
</body>  
</html>  

相同功能的方法有:

   Js代码  
    
  
function loadJS2(url, callback) {  
    var script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.charset = "utf-8";  
    if (script.readyState) {  // 兼容IE的旧版本  
        script.onreadystatechange = function () {  
            if (script.readyState == 'loaded' || script.readyState == 'complete') {  
                script.onreadystatechange = null;  
                callback();  
            }  
        }  
    }  
    else {  
        script.onload = function () {  
            callback();  
        }  
    }  
    script.src = url;  
    document.getElementsByTagName('head')[0].appendChild(script);  
}  
  
function xhrLoadJS(url, callback) {  
    var xhr = createXHR();  
    xhr.open('get', url, true);  
    xhr.onreadystatechange = function () {  
        if (xhr.readyState == 4) {  
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304/*页面未修改*/) {  
                var script = document.createElement('script');  
                script.type = 'text/script';  
                script.charset = "utf-8";  
                script.text = xhr.responseText;  
                eval(xhr.responseText);  // 执行代码  
                document.body.appendChild(script);  
                if (callback && typeof callback === 'function') {  
                    callback();  
                }  
            }  
        }  
    };  
    xhr.send(null);  
}  
/*获取异步请求的对象*/  
var createXHR = function () {  
  
    try {  
        xhr = new XMLHttpRequest();  
        return xhr;  
    } catch (e) {  
        try {  
            xhr = new ActiveXObject("Microsoft.XMLHTTP");  
            return xhr;  
        } catch (ee) {  
            xhr = false;  
        }  
    }  
    if (!xhr && typeof XMLHttpRequest != 'undefined') {  
        new ActiveXObject("Msxml2.XMLHTTP");  
        return xhr;  
    }  
};  

动态加载js

热门文章

最新文章

相关课程

相关电子书

相关实验场景