要实现动态加载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();
原文转载
http://hi.baidu.com/myeclipse_6_0/item/dd05bb4e8833e9ee1f19bc7b
分享到:
相关推荐
动态加载JS脚本的动态加载JS脚本的动态加载JS动态加载JS脚本的4种方法.doc方法.doc
今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个...
下面是4种比较常用的方法,大家可以根据情况选择,最后软件开发网 将会给推荐一个。1、直接[removed] 代码如下:[removed] [removed](“[removed]<\/script>”); [removed] 2、动态改变已有script的src属性 代码...
vue动态加载JavaScript:动态的创建Script元素,然后通过更改它的 src 属性来加载脚本,脚本文件加载完成后,在脚本加载完成生效后才能执行回调函数。
主要介绍了js实现动态加载脚本的方法,以实例形式汇总并分析了几种常用的JavaScript动态加载脚本的技巧,非常具有实用价值,需要的朋友可以参考下
下面小编就为大家带来一篇javascript 动态脚本添加的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一、jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件;当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样: 代码如下:jQuery.getScript(“/...
概要 应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript ... Javascript 脚本使用网址中的路径名,判断当前网页位置,从而决定执行哪种操作。 python 代码示例 #!/usr/bin/env python3 # -*- c
脚本精灵,可以很方便的帮助你生成各种JS脚本文件,自己用的感觉不错,经常用到脚本,又懒得自己去写的朋友可以用脚本精灵自动生成~
网页js脚本注入,可执行任意代码。这里有个实例教程,通过注入实现跳过验证码。
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。Javascript提供了丰富的运算功能,包括算术运算、关系运算、逻辑运算和连接运算。JavaScript的一个重要功能...
js 动态插入脚本也有两种方式:插入 JavaScript 代码和插入外部文件。 一、直接插入 javascript 代码 [removed] function sayHi() { alert("hi"); } [removed] 从逻辑上讲,下面的 DOM 代码是有效的: ...
Firebug控制台动态加载jquery脚本并执行jquery代码
类似于浏览器端require的资源动态加载框架,但没有什么复杂的设置,简单易用.搭乘腾讯地图部分api演示,chrome firefox 微信内置浏览器 安卓华为浏览器等测试通过,目前发现IE因不支持箭头函数,Promise等ES6新姿势, 故...
所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script ...
Netscape 4针对DOM采用了一种非常不同的方式,基于叫做层的动态定位的可脚本化元素。这一Netscape 4 DOM是革新的尽头,它只被Netscape 4支持,并且在由Netscape代码基础上扩展而来的Mozilla和Firefox浏览器中也被...
IE js脚本调试插件
使用nodejs vm2加载JS脚本,传参执行脚本返回结果