动态加载js

最新推荐文章于 2023-05-12 18:13:31 发布

调皮的芋头

最新推荐文章于 2023-05-12 18:13:31 发布

阅读量164

点赞数

分类专栏： java web javascript 文章标签：动态加载js文件异步加载js文件

java web 同时被 2 个专栏收录

236 篇文章 0 订阅

订阅专栏

javascript

140 篇文章 0 订阅

订阅专栏

1,如何动态加载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文件中的函数或变量

实例:

<!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>

相同功能的方法有:

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;
	}
};

调皮的芋头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态加载js

1,如何动态加载js文件,并且加载完成之后调用其中的函数呢?function loadJs(url, callback) { var done = false; var script = document.createElement('script'); script.type = 'text/javascript';//do not 'application/...
复制链接

扫一扫

专栏目录