动态加载js文件
一.直接加载
<body>
<div id="divId"></div>
<script>
//1.动态创建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.调用js
test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)
</script>
</body>
二.同步加载
<body>
<div id="divId"></div>
<script>
(function(){
Skip={
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
getXmlHttpRequest:function ()
{
if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//导入内容
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);
}
},
//导入文件
includeJsSrc :function (rootObject, fileUrl)
{
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.src = fileUrl;
rootObject.appendChild(oScript);
}
},
//同步加载
addJs:function(rootObject, url){
var oXmlHttp = this.GetHttpRequest() ;
oXmlHttp.onreadystatechange = function() //其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
{
if ( oXmlHttp.readyState == 4 ) //当执行完成以后(返回了响应)所要执行的
{
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) //200有读取对应的url文件,404表示不存在这个文件
{
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"></script>',ff不会
oXmlHttp.send(null);
includeJsText(rootObject,oXmlHttp.responseText);
}
}
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使马上调用也不会出错了.
})();
</script>
</body>
总结:
1.ie动态加载js文件时,它默认就为同步,可以不用设置同步(也可直调用Skip.includeJsSrc())
2.ff动态加载js文件时,它默认为异步,要设置成同步,加载完直接调用才不会出错
3.无论ie还是ff在动态加载js内容时,没有请求服务器,不会存在异步问题
注:无论ie还是ff在页面加载js时(即执行整个页面),都是为同步的加载,除非设置script的属性defer="true"(此属性好像也只是对ie有效)
分享到：
相关推荐
通过上述函数可以实现异步加载js文件，如果需要同步加载，可以通过将创建的script元素添加到页面的head部分之前来实现： ```javascript function loadJsFileSync(url,FileType,successCallback){ var script = ...
**JSLoader：异步加载JavaScript文件** 在网页开发中，JavaScript文件的加载是网页渲染过程中的关键步骤。大型应用往往包含多个JS文件，这可能导致页面加载速度变慢，影响用户体验。为了解决这个问题，开发者引入了...
1. **动态`<script>`元素**：在"init.js"中，可以动态创建`<script>`元素，并设置其`src`属性为要加载的JavaScript文件。然后将这个元素插入到DOM中，浏览器会自动开始下载并执行该脚本。 2. **利用模块系统**：...
有时候我们需要根据参数不同来引入不同的js文件，用html直接写标签满足不了我们的需求，总结几种方法，以及同步异步加载的各种需求 一.直接加载 <div id=divId></div> [removed] 二.异步加载，并发执行，但引入js...
这两种JavaScript方法可以让你在运行时动态地创建组件，但需要注意的是，它们都在JavaScript上下文中进行，可能涉及线程同步问题。如果在非主线程中使用，记得使用异步方式，以避免阻塞UI。 异步加载组件是处理大...
本主题将深入探讨如何使用原生JavaScript实现异步文件上传，包括利用`FormData`对象、Base64编码以及对图片进行压缩、变色和尺寸调整的方法。 一、异步上传 传统的文件上传通常依赖于表单的`<form>`元素，通过`...
接下来，我们引入 layui.js，这是一个包含 jQuery、layer（弹层组件）、form、element 等模块的 JavaScript 文件。在 JavaScript 部分，我们使用 layui 提供的工具方法来操作页面元素和事件。 layui.tree 初始化时...
在"asyLoad.js"这个文件中，我们可以预期它包含了一段用于实现JavaScript异步加载的代码。下面将详细介绍异步加载的原理和常见实现方法。 1. **异步加载的原理**： - 使用`<script>`标签的`async`属性：当`async`...
在JavaScript编程中，有时我们需要在运行时动态地加载外部JavaScript文件，并且希望访问这些文件中的变量或函数。这种需求在处理模块化开发、按需加载或者处理第三方库时尤为常见。"js动态引入外部js脚本并获取里面...
在前端开发中，JavaScript文件的加载方式主要分为同步加载和异步加载两种。下面详细介绍这两种加载方式的实现代码及其优缺点。 ### 同步加载 同步加载是最简单的加载方式，通过在HTML文件中使用标签引用JavaScript...
- 通过动态创建`script`元素并将其插入DOM，可以实现异步加载和延迟加载，这种方式对脚本的来源没有同源策略的限制。 - 例如，Google Analytics和Google+ Badge的异步加载代码就使用了这种方法。 7. **优化策略**...
在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...
在互联网应用开发中，加载JavaScript文件是常见的需求，但同步加载可能会阻塞浏览器渲染，影响用户体验。异步加载JavaScript文件则可以解决这个问题，它允许页面继续加载其他资源，而不会被脚本加载所阻塞。本文将...
异步加载JavaScript文件通常会使用`<script>`标签动态地向文档的`<head>`或`<body>`中添加脚本。当`<script>`标签被添加到DOM中时，浏览器会立即开始下载对应的脚本文件。由于`<script>`标签的下载和执行过程是同步...
为了解决这个问题，文档建议使用AJAX同步请求远程JavaScript文件，而不是异步加载。这样做的好处是加载的JavaScript文件可以立即执行，而不必等待其他脚本完全加载完毕。文中讨论了路径问题，并建议以执行调用功能的...
传统的文件上传是同步的，意味着用户提交表单后浏览器会等待服务器响应，直到所有文件上传完毕。而异步上传，通常使用Ajax技术，允许后台上传文件，用户界面则可以保持交互状态，显示上传进度。 1. **前端准备**： ...