JS动态插入并立即执行回调函数的方法
本文实例讲述了JS动态插入并立即执行回调函数的方法。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<divid="loading">加载中……</div>
<mce:scripttype="text/JavaScript">
<!--
functionloadJs(id,url,callback){
varscript=document.createElement('script');
script.type='text/javascript';
script.src=url;
script.id=id;
script.onload=script.onreadystatechange=function(){
alert(script.readyState);
if(script.readyState&&script.readyState!='loaded'&&script.readyState!='complete')return;
script.onreadystatechange=script.onload=null
if(callback)callback();
}
document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
//--></mce:script>
</body>
</html>
动态插入js文件在提高页面加载速度和跨域问题上有非常重要的作用。上面就是一个简单例子。
ie上支持onreadystatechange,不支持onload
firefox上支持onload,不支持onreadystatechange
ie上面不一定loaded或者是complete触发,或者两个都会触发,所以用或来判断。
需要注意的是script.onreadystatechange和script.readyState的大小写形式,不区分大小写就可能导致不易发现的错误。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。