动态加载JS脚本的4种方法
2006-12-04 15:33
要实现动态加载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();
分享到:
相关推荐
在Web开发中,动态加载JavaScript脚本是一种常见的优化策略,它允许在页面加载后根据需要按需加载脚本,从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法,并探讨它们的工作原理和应用场景。 1...
今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个...
Vue动态加载JS是一种实现这一需求的技术,它允许我们在运行时根据需要加载JavaScript文件。本文将深入探讨Vue动态加载JavaScript的原理、方法以及其实现步骤。 首先,我们需要理解Vue动态加载的核心概念。在HTML中...
在实际应用中,C#通过调用Noesis.Javascript库的API,可以轻松地执行JavaScript脚本,如下所示: ```csharp using Noesis.Javascript; // 创建JavaScript引擎实例 var engine = new JavascriptEngine(); // 注册...
"js动态引入外部js脚本并获取里面的变量值"这个主题就是关于如何在JavaScript中实现这种功能的讨论。 首先,`jQuery`库提供了一个非常方便的方法来实现动态加载外部脚本:`$.getScript()`。这是一个异步方法,它...
动态加载外部JS文件是网页开发中的一个重要技术,它允许网页在需要时按需加载JavaScript资源,从而提高页面的加载速度,优化用户体验,并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...
给定的部分内容中的代码展示了如何使用JavaScript(实际上是在Unity中使用的旧式JavaScript语法)动态添加脚本组件。这段代码首先定义了一个`GameObject`类型的变量`obj`和一个`GUISkin`类型的变量`myskin`,然后在`...
最后,文章中提到的通过按钮点击事件触发动态添加JavaScript脚本的方法,是一种常见的实现动态脚本添加的交互方式。通过为按钮绑定点击事件,并在事件处理函数中执行动态添加脚本的函数,可以使得在用户交互过程中按...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和数据管理。在实际项目中,为了提高页面加载速度和优化用户体验,我们常常需要按需加载JavaScript文件,而不是一次性加载所有...
3. 加载并执行Groovy脚本:通过GroovyClassLoader的`parseClass()`方法解析Groovy源码,然后使用`newInstance()`方法创建脚本实例,最后通过`invokeMethod()`方法执行脚本中的方法。 在Java与MongoDB的交互中,我们...
在前端开发中,有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时,可能会遇到需要按需加载某些功能的情况,例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...
标题中的知识点是关于JavaScript动态加载脚本的方法。描述中强调了动态加载JavaScript文件的好处,主要是为了提高页面加载效率,避免加载不必要的脚本资源。此外,还指出了单个大文件适合动态加载的情况,以及小文件...
网页JS脚本注入,突破网页本地脚本验证方法实例 JS脚本注入是一种常见的网页攻击手法,通过注入恶意脚本来控制网页的行为。在这个实例中,我们将展示如何使用JS脚本注入来突破网页本地脚本验证方法,跳过验证码,并...
总结来说,动态插入JavaScript脚本代码的关键在于确保脚本加载和执行的正确时机。通过合理使用`defer`属性、`onload`事件、`readyState`检查和`window.setTimeout`,我们可以确保脚本加载完成后,再执行相关的函数,...
JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责客户端的动态交互。作为网页和浏览器之间的桥梁,它使得网页可以实现丰富的用户体验和动态功能。本压缩包"JavaScript脚本精华"汇集了大量JS...
在Ant构建过程中,JavaScript脚本方法的使用是一个强大的工具,它允许开发者自定义构建过程,实现更复杂的逻辑和任务自动化。Ant是一个Java库和命令行工具,它的设计目标是驱动软件构建过程,尤其是在Java项目中。这...
这就是`js jar jwr`标签所指的场景,它涉及到Java运行时环境中如何加载和执行JavaScript脚本。 1. **Nashorn JavaScript引擎**: 在Java 8之前,Java提供了Nashorn JavaScript引擎,这是一个内置的JavaScript解释...
本文将详细介绍两种常见的动态加载JavaScript文件的方法,并讨论它们的安全性。 ### 方法一:使用Ajax加载 通过Ajax请求加载JavaScript文件,实质上是向服务器发送异步请求获取脚本内容,然后使用`eval()`函数执行...