动态加载js的方法汇总
动态加载js的方法汇总
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例汇总了动态加载js的方法。分享给大家供大家参考。具体如下:方法一:直接document.write(异步)复制代码代码如下:docu...

本文实例汇总了动态加载js的方法。分享给大家供大家参考。具体如下:

方法一:直接document.write(异步)

复制代码 代码如下:<script language="javascript">

document.write("<script src='res/extwidget/echarts/xx.js'></script>");

</script>

由于这种方式是异步加载,document.write会重写界面,明显不实用

方法二:动态改变已有script的src属性(异步)

复制代码 代码如下:<script src='' id="xx"></script>

<script language="javascript">

xx.src="test.js"

</script>

此种方法不会改变界面元素,不重写界面元素,但同样是异步加载

方法三:动态创建script元素(异步)

复制代码 代码如下:<script>

var body= document.getElementsByTagName('BODY').[0];

var script= document.createElement("script");

script.type = "text/javascript";

script.src="xx.js";

body.appendChild( oScript);

</script>

此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签,缺点还是异步加载

方法四:XMLHttpRequest/ActiveXObject加载(异步)

复制代码 代码如下:/**

* 异步加载js脚本

* @param id 需要设置的<script>标签的id

* @param url js文件的相对路径或绝对路径

*/

loadJs:function(id,url){

var xmlHttp = null;

if(window.ActiveXObject){//IE

try {

//IE6以及以后版本中可以使用

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

//IE5.5以及以后版本可以使用

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}else if(window.XMLHttpRequest){

//Firefox,Opera 8.0+,Safari,Chrome

xmlHttp = new XMLHttpRequest();

}

//采用同步加载

xmlHttp.open("GET",url,false);

//发送同步请求,

//如果浏览器为Chrome或Opera,必须发布后才能运行,不然会报错

xmlHttp.send(null);

xmlHttp.onreadystatechange = function(){

//4代表数据发送完毕

if( xmlHttp.readyState == 4 ){

//0为访问的本地,200到300代表访问服务器成功,

//304代表没做修改访问的是缓存

if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){

var myBody = document.getElementsByTagName("BODY")[0];

var myScript = document.createElement( "script" );

myScript.language = "javascript";

myScript.type = "text/javascript";

myScript.id = id;

try{

//IE8以及以下不支持这种方式,需要通过text属性来设置

myScript.appendChild(document.createTextNode(xmlHttp.responseText));

}catch (ex){

myScript.text = xmlHttp.responseText;

}

myBody.appendChild(myScript);

}

}

}

//采用异步加载

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

open里面设置为false就是同步加载了,同步加载不需要设置onreadystatechange事件

这四种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行。

方法五:XMLHttpRequest/ActiveXObject加载(同步)

复制代码 代码如下:/**

* 同步加载js脚本

* @param id 需要设置的<script>标签的id

* @param url js文件的相对路径或绝对路径

* @return {Boolean} 返回是否加载成功,true代表成功,false代表失败

*/

loadJs:function(id,url){

var xmlHttp = null;

if(window.ActiveXObject){//IE

try {

//IE6以及以后版本中可以使用

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

//IE5.5以及以后版本可以使用

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}else if(window.XMLHttpRequest){

//Firefox,Opera 8.0+,Safari,Chrome

xmlHttp = new XMLHttpRequest();

}

//采用同步加载

xmlHttp.open("GET",url,false);

//发送同步请求,如果浏览器为Chrome或Opera,必须发布后才能运行,不然会报错

xmlHttp.send(null);

//4代表数据发送完毕

if( xmlHttp.readyState == 4 ){

//0为访问的本地,200到300代表访问服务器成功,304代表没做修改访问的是缓存

if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){

var myBody = document.getElementsByTagName("BODY")[0];

var myScript = document.createElement( "script" );

myScript.language = "javascript";

myScript.type = "text/javascript";

myScript.id = id;

try{

//IE8以及以下不支持这种方式,需要通过text属性来设置

myScript.appendChild(document.createTextNode(xmlHttp.responseText));

}catch (ex){

myScript.text = xmlHttp.responseText;

}

myBody.appendChild(myScript);

return true;

}else{

return false;

}

}else{

return false;

}

}

希望本文所述对大家的javascript程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类