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