Javascript:动态加载JS两种方式!

littlebrain4solving

于 2014-10-24 17:12:41 发布

阅读量950

点赞数

CC 4.0 BY-SA版权

分类专栏：工作记载文章标签： javascript extjs

本文链接：https://blog.youkuaiyun.com/littlebrain4solving/article/details/40430347

工作记载专栏收录该内容

49 篇文章

订阅专栏

本文介绍了两种JavaScript文件的动态加载方法：一是通过Ajax获取JS代码并插入到页面中；二是直接设置script标签的src属性，并监听加载完成事件。这两种方法各有优缺点，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式-直接把JS代码嵌入进页面:

(这里采用的ExtJs的AJax加载方式为例子,也可以换成JQuery的Ajax形式加载,我就不写JQuery的例子了,自己可以去试试!)

Ext.Ajax.request({
　　url : 'text.js',
　　success : function(response){
　　　　var headTag = document.getElementsByTagName("head")[0];
　　　　var scriptTag = document.createElement("script");
　　　　scriptTag.type = "text/javascript";
　　　　scriptTag.text = response.responseText;
　　　　headTag.appendChild(scriptTag);
　　},
　　method : 'GET'
});

第二种方式-引用JS地址进行动态加载并监听远程地址加载完成事件。

var headTag = document.getElementsByTagName("head")[0];
   var scriptTag = document.createElement("script");
   scriptTag.type = "text/javascript";
   scriptTag.src = 'test.js';
   scriptTag.onload = scriptTag.onreadystatechange = function() {
      if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
          alert('JS动态加载完成');
      }
}
headTag.appendChild(scriptTag);

有问题的大家可以留言给我,大家共同探讨一下哈！