动态加载JS文件3种方式整理

php中世界最好的语言
Lepaskan: 2018-05-23 15:01:19
asal
1550 orang telah melayarinya

这次给大家带来动态加载JS文件3种方式整理,动态加载JS文件的注意事项有哪些,下面就是实战案例,一起来看一下。

一、使用document.write/writeln()方式

该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。

实现方式:

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
Salin selepas log masuk

需要注意的是特殊字符的转义。

二、使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript(&#39;test.js&#39;,function(){
 alert(&#39;done&#39;);
});
Salin selepas log masuk

三、使用原生js方法

原理:动态创建script标签,并指定script的src属性

function loadJs(url,callback){
 var script=document.createElement(&#39;script&#39;);
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert(&#39;done&#39;);
 });
Salin selepas log masuk

还可以使用同样的原理动态加载css文件,只不过插入的的父节点是head标签。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何动态引入JS文件

H5中data-*属性使用方法汇总

怎么实现JS同步、异步、延迟加载

Atas ialah kandungan terperinci 动态加载JS文件3种方式整理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan