欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js动态引入的四种方法

程序员文章站 2022-09-04 09:44:43
本文表述了关于js动态引入四种方式的实例代码。分享给大家供大家参考,具体如下: index.html ...

本文表述了关于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动态引入,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。