同步异步动态引入js文件的几种方法总结

动态加载js文件

有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求

一.直接加载

<div id="divId"></div>
<script>

二.异步加载,并发执行,但引入js内容不能直接使用

//1.1 直接document.write
 document.write("<script src='test.js'><\/script>");
//1.2 动态改变已有script的src属性
 //页面中有<script src='' id="s1"></ script>
document.getElementById('s1').src="test.js";
 //1.3 动态创建js
 var rootObject=document.getElementById("divId");
 var oScript = document.createElement( "script" );
 oScript.type = "text/javascript";
 oScript.src = test.js; //test.js方法中有一个方法function test(){alert("test");}
 rootObject.appendChild(oScript);
 //2.0 调用js
 test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)

三.同步加载,单步加载,引入js内容可以直接使用

var Skip={};
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
Skip.getXmlHttpRequest=function (){
 if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
 return new XMLHttpRequest() ;
 else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//导入内容
Skip.includeJsText =function (rootObject,jsText){
 if ( rootObject != null ){
 var oScript = document.createElement( "script" );
 oScript.type = "text/javascript";
//oScript.id = sId;
//oScript.src = fileUrl;
//oScript.defer = true;
oScript.text = jsText;
rootObject.appendChild(oScript);
//alert(oScript.text);
 }
 },
//导入文件
Skip.includeJsSrc =function (rootObject, fileUrl){
 if ( rootObject != null ){
 var oScript = document.createElement( "script" );
 oScript.type = "text/javascript";
 oScript.src = fileUrl;
 rootObject.appendChild(oScript);
 }
},
//同步加载
Skip.addJs=function(rootObject, url){
 var oXmlHttp = Skip.getXmlHttpRequest() ;
 oXmlHttp.onreadystatechange = function(){//其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
if ( oXmlHttp.readyState == 4 ){ //当执行完成以后(返回了响应)所要执行的
 if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有读取对应的url文件,404表示不存在这个文件
 Skip.includeJsSrc( rootObject, url);
 } else{
 alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
 }
}
}
//1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
//2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会
oXmlHttp.send(null);
Skip.includeJsText(rootObject,oXmlHttp.responseText);
}
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使马上调用也不会出错了.
</script>

总结:

1. ie动态加载js文件时,它默认就为同步,可以不用设置同步(也可直调用Skip.includeJsSrc())

2. ff动态加载js文件时,它默认为异步,要设置成同步,加载完直接调用才不会出错

3. 无论ie还是ff在动态加载js内容时,没有请求服务器,不会存在异步问题

注:无论ie还是ff在页面加载js时(即执行整个页面),都是为同步的加载,除非设置script的属性defer="true"(此属性好像也只是对ie有效)

以上就是小编为大家带来的同步异步动态引入js文件的几种方法总结的全部内容了,希望对大家有所帮助,多多支持我们~

(0)

相关推荐

  • JavaScript文件的同步和异步加载的实现代码

    对于JS文件的引用,尽管当前有不少框架和工具(比如webpack,commonjs,requiresjs等)都做了很好的处理.但是抛开这些框架,了解原生的加载方式还是不无裨益.本文简述一些js文件的同步和异步加载方式. 同步加载 可在html文件里以<script>标签插入,这是初学时最基本的方式. 准备两个js文件如下: calc1.js console.log('calc1 loading begin') function add(...args) { return args.reduce

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

  • 浅谈js文件引用方式及其同步执行与异步执行

    任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

  • javascript 文件的同步加载与异步加载实现原理

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部代码文件,不限制后缀名. type: 必选.指定脚本的内容类型(M

  • 同步异步动态引入js文件的几种方法总结

    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>

  • 在js文件中引入(调用)另一个js文件的三种方法

    比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?下面就总结下在js文件中引入另一个js文件的实现 方法一,在调用文件的顶部加入下例代码 function addScript(url){ document.write("<script language=javascript src="+url+"></script>"); } 注:有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进

  • 不使用script导入js文件的几种方法

    方法一:原生 adc.js内容如下: var hello = "H9"; html.html <script> var s = document.createElement("script"); s.src = "abc.js"; document.head.appendChild(s); s.addEventListener("load",function(){ // 等待s的load事件加载完响应,防止未加载完

  • 动态加载JS文件的三种方法

    直接看实例.例1 重新加载js文件 复制代码 代码如下: function loadJs(file) {            var head = $("head").remove("script[role='reload']");            $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 're

  • Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用

  • asp.net后台动态添加JS文件和css文件的引用实现方法

    本文实例讲述了asp.net后台动态添加JS文件和css文件的引用实现方法.分享给大家供大家参考之用.具体方法如下: 首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用: HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "tex

  • asp.net后台如何动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "text/css"); myCss .Attributes.Add("rel", "s

  • jQuery解析XML文件同时动态增加js文件的方法

    本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj) { var field = $(this); var funcName = field.at

  • 引入JS文件IE6报语法错误或缺少对象问题的解决方法

    解决"引入JS文件IE6报错"的问题 问题描述: 页面引入一个js文件,其中定义了函数或对象,然后在页面中调用函数或对象时,在IE6会报"语法错误"或"缺少对象".在IE6+或者IE7却运行正常. 问题分析: 这个对象在引入的JS文件中是存在的,因为在IE6+以上的浏览器都可以正常运行.这个问题在于文件编码上,如果JS文件编码与当前页面的编码不一致,就可能导致在IE6中页面不能正常获取和解析JS文件中的内容,在IE6中,默认引入的文件和页面的编码

  • asp.net动态添加js文件调用到网页的方法

    本文实例讲述了asp.net动态添加js文件调用到网页的方法.分享给大家供大家参考.具体实现方法如下: HtmlGenericControl JsControl = new HtmlGenericControl("script"); JsControl.Attributes.Add("type", "text/javascript"); JsControl.Attributes.Add("src", url); page.He

随机推荐