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程序设计有所帮助。