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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

js动态引入的四种方法

请登录后发表评论