js动态引入的四种方法

本文表述了关于js动态引入四种方式的实例代码。分享给大家供大家参考，具体如下：

index.html

<html>
 <head>
 <meta content="text/html;charset=utf-8" http-equiv="content-type">
 <title> </title>
 <script src='' id="s1"></script>
 <script src="dynamic.js"></script>
 </head>
 <body>
 </body>
</html>

test.js

alert("hello! I am test.js");
var str="1";

dynamic.js

//第一种方式：直接document.write 但这样会把当前的页面全覆写掉
//document.write("<script src='test.js'><\/script>"); 

//第二种方式:动态改变已有script的src属性
//s1.src="test.js" 

//第三种方式：动态创建script元素
/* var oHead = document.getElementsByTagName('HEAD').item(0);
 var oScript= document.createElement("script");
 oScript.type = "text/javascript";
 oScript.src="test.js";
 oHead.appendChild(oScript);
*/
//其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~
//alert(str); 

/*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走，
如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing....
那么第四种就是基于ajax请求的,且是推荐
*/
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)
 {
 includeJS( sId, url, oXmlHttp.responseText );
 }
 }
 oXmlHttp.open('GET', url, false);//同步操作
 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.type = "text/javascript";
 oScript.id = sId;
 oScript.text = source;
 oHead.appendChild( oScript );
 }
}
ajaxPage( "scrA", "test.js" );
alert( "主页面动态加载JS脚本。");
alert( "主页面动态加载a.js并取其中的变量：" + str );

上文所表述的全部内容是js动态引入，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • 同步异步动态引入js文件的几种方法总结
  • javascript 动态修改css样式方法汇总(四种方法)
  • 动态加载JS文件的三种方法
  • 使用jQuery动态加载js脚本文件的方法
  • JS动态添加option和删除option(附实例代码)
  • js给onclick事件赋值，动态传参数实例解说
  • js form action动态修改方法
  • jquery及js实现动态加载js文件的方法
  • jquery getScript动态加载JS方法改进详解
  • AngularJs根据访问的页面动态加载Controller的解决方案
  • JS动态创建元素的两种方法
赞 (0)

相关推荐

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

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

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

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

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

  • JS动态创建元素的两种方法

    JS动态创建元素的两种方法

    本文为大家分享了js创建元素的两种方法供大家参考,具体内容如下 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div

  • js给onclick事件赋值，动态传参数实例解说

    我们先看看错误的例子 Html代码 复制代码 代码如下: <body> <input id="certid" type="text" value="123456" > <input id="btn" type="button" value="button" onclick=""> </body> Javascript代码

  • AngularJs根据访问的页面动态加载Controller的解决方案

    用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的control

  • javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

  • js form action动态修改方法

    一般比较简单的就是document.formName.action="/dddd.do?ddd="+str document.formName.submit(); 写成函数式的调用就是 复制代码 代码如下: <script language="JavaScript" > function checkaction(v){ if(v==0){ document.dbform.action="index.php?admin_db-repair&quo

  • jquery getScript动态加载JS方法改进详解

    jquery getScript动态加载JS方法改进详解

    复制代码 代码如下: $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛? 于是找到Jquery官网的API说明 http://api.jquery.com/jQuery.getScript/ 其实这个方法就是对aja

  • JS动态添加option和删除option(附实例代码)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docume

  • 使用jQuery动态加载js脚本文件的方法

    它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: 复制代码 代码如下: jQuery.getScript("/path/t

随机推荐