首页 > 编程 > JavaScript > 正文

js动态引入的四种方法

2019-11-19 13:54:43
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表