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动态创建元素的两种方法