【转】JS 动态加载脚本的4种方法

ゝ一世哀愁。 2021-12-12 13:27 227阅读 0赞

[点击去原文][Link 1]  
如果js文件都比较小，还是一个js好，这样可以减少连接数。下面是4种比较常用的方法，大家可以根据情况选择，最后脚本之家 将会给推荐一个。  
**1、直接document.write**

复制代码 代码如下:

<script language=“javascript”>  
document.write("<script src=‘test.js’></script>");  
</script>

**2、动态改变已有script的src属性**

复制代码 代码如下:

<script src=’’ id=“s1”></script>  
<script language=“javascript”>  
s1.src=“test.js”  
</script>

**3、动态创建script元素**

复制代码 代码如下:

<script>  
var oHead = document.getElementsByTagName(‘HEAD’).item(0);  
var oScript= document.createElement(“script”);  
oScript.type = “text/javascript”;  
oScript.src=“test.js”;  
oHead.appendChild( oScript);  
</script>

**这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。**  
要动态加载的JS脚本：a.js，以下是该文件的内容

复制代码 代码如下:

var str = “中国”;  
alert( “这是a.js中的变量：” + str );

主页面代码：

复制代码 代码如下:

<script language=“JavaScript”>  
function LoadJS( id, fileUrl )  
\{  
var scriptTag = document.getElementById( id );  
var oHead = document.getElementsByTagName(‘HEAD’).item(0);  
var oScript= document.createElement(“script”);  
if ( scriptTag ) oHead.removeChild( scriptTag );  
[oScript.id][] = id;  
oScript.type = “text/javascript”;  
oScript.src=fileUrl ;  
oHead.appendChild( oScript);  
\}  
LoadJS( “a.js” );  
alert( “主页面动态加载a.js并取其中的变量：” + str );  
</script>

上述代码执行后 a.js 的 alert 执行并弹出消息，  
但是 主页面产生了错误，没有弹出对话框。原因是 ‘str’ 未定义，为什么呢？因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候，可以用下面的第四种方法。  
**4、原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。**  
注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。  
主页面代码：

复制代码 代码如下:

<script language=“JavaScript”>  
function GetHttpRequest()  
\{  
if ( window.XMLHttpRequest ) // Gecko  
return new XMLHttpRequest() ;  
else if ( window.ActiveXObject ) // IE  
return new ActiveXObject(“MsXml2.XmlHttp”) ;  
\}  
function AjaxPage(sId, url)\{  
var oXmlHttp = GetHttpRequest() ;  
oXmlHttp.OnReadyStateChange = function()  
\{  
if ( oXmlHttp.readyState == 4 )  
\{  
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )  
\{  
IncludeJS( sId, url, oXmlHttp.responseText );  
\}  
else  
\{  
alert( ‘XML request error: ’ + oXmlHttp.statusText + ’ (’ + oXmlHttp.status + ‘)’ ) ;  
\}  
\}  
\}  
oXmlHttp.open(‘GET’, url, true);  
oXmlHttp.send(null);  
\}  
function IncludeJS(sId, fileUrl, source)  
\{  
if ( ( source != null ) && ( !document.getElementById( sId ) ) )\{  
var oHead = document.getElementsByTagName(‘HEAD’).item(0);  
var oScript = document.createElement( “script” );  
oScript.language = “javascript”;  
oScript.type = “text/javascript”;  
[oScript.id][] = sId;  
oScript.defer = true;  
oScript.text = source;  
oHead.appendChild( oScript );  
\}  
\}  
AjaxPage( “scrA”, “b.js” );  
alert( “主页面动态加载JS脚本。”);  
alert( “主页面动态加载a.js并取其中的变量：” + str );  
</script>

现在完成了一个JS脚本的动态加载。

复制代码 代码如下:

var Rash=true;  
var msg="";  
function norash()  
\{  
if (confirm(“确定要取消吗”))  
Rash=false;  
\}  
function rashit()  
\{  
setInterval(‘getrss()’,Inttime);  
\}  
function getrss()  
\{  
if (Rash==true)  
\{  
head=document.getElementsByTagName(‘head’).item(0);  
script=document.createElement(‘script’);  
script.src=‘INCLUDE/AutoUpdate.asp’;  
script.type=‘text/javascript’;  
script.defer=true;  
void(head.appendChild(script));  
window.status=msg;  
\}  
\}  
rashit();

注意文字加粗的地方，大家可以情况选择。

[Link 1]: https://www.jb51.net/article/17992.htm
[oScript.id]: http://oScript.id

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关三种获取js加载的动态内容的方法

有些网站的比较重要的内容可能会采用javascript动态加载内容，防止采集，获取其中的信息，但是我们在采集的时候还需要获取到这些内容，下面就介绍三种可以获取到javasc

谁践踏了优雅/ 2022年09月21日 01:02/ 0 赞/ 293 阅读

相关 js动态加载js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

约定不等于承诺〃/ 2022年08月27日 05:52/ 0 赞/ 224 阅读

相关 js实现动态加载脚本的方法

首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下： [?][Link 1]

叁歲伎倆/ 2022年06月07日 00:19/ 0 赞/ 227 阅读

相关 2种方法简单爬取JS加载的动态数据

参考原文:http://www.cnblogs.com/buzhizhitong/p/5697683.html 需要爬取的网站数据: http://gkcx.e

Myth丶恋晨/ 2022年06月04日 02:42/ 0 赞/ 354 阅读

相关 JS动态加载

/ loadJS:动态加载js文件---方法定义 js_path：动态加载js文件的路径 callback：加载完成后执行的回调函数 / functio

女爷i/ 2022年06月03日 00:28/ 0 赞/ 243 阅读

相关动态加载js

两种方式：第一种，通过请求添加： //动态加载脚本 function UseJs() { $.ajax(

矫情吗；*/ 2022年06月01日 01:55/ 0 赞/ 268 阅读

相关 js实用方法记录-js动态加载css、js脚本文件

https://www.cnblogs.com/morang/p/dynamicloadjscssiframe.html js实用方法记录-动态加载css/js

冷不防/ 2022年05月30日 01:40/ 0 赞/ 195 阅读

相关 js延迟加载的几种方法

这是一个面试经常问到的问题：js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度) 主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目

爱被打了一巴掌/ 2022年05月14日 05:25/ 0 赞/ 326 阅读

相关网站动态加载JS脚本

Demo\_1 function loadJS(url, fn) { var ss = document.getElementsByName('

男娘i/ 2022年03月31日 05:15/ 0 赞/ 311 阅读

相关【转】JS 动态加载脚本的4种方法

[点击去原文][Link 1] 如果js文件都比较小，还是一个js好，这样可以减少连接数。下面是4种比较常用的方法，大家可以根据情况选择，最后脚本之家将会给推荐一个。

ゝ一世哀愁。/ 2021年12月12日 13:27/ 0 赞/ 228 阅读