您的位置：首页 > Web前端 > JavaScript

js动态引入的四种方式

2015-09-17 17:22 330 查看

index.html

[html] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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

[html] view plain copy

alert("hello! I am test.js");

var str="1";

dynamic.js

[javascript] view plain copy

//第一种方式：直接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....

<strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong>

*/

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 );

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航