使用AJAX动态加栽JS脚本和CSS样式

最新推荐文章于 2021-08-06 13:26:53 发布

weixin_30521161

最新推荐文章于 2021-08-06 13:26:53 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hawkjin/archive/2008/07/22/1248900.html

本文介绍了一种在网页中动态加载JavaScript和CSS文件的方法。通过使用JavaScript创建新的script和link元素，并利用AJAX技术获取远程文件内容，可以实现按需加载资源的功能。此方法有助于优化页面加载速度和提高用户体验。

1.Default.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>TestJS</title>

</head>

<br />

</body>

</html>

2.js.js

function doOnLoad()

{

document.getElementById('btnTest').onclick = doTest;

document.getElementById('btnGetJS').onclick = doGetJS;

}

function doTest()

{

var jsTest = test;

if(jsTest)

{

jsTest();

checkBtnTest('myjs');

}

else

{

alert('无函数！');

}

function doGetJS()

{

checkBtnTest('myjs');

var jsName = 'js' + document.getElementById('txtJSName').value + '.js';

AjaxPage('myjs', jsName);

}

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 )

{

if (oXmlHttp.status == 200 || oXmlHttp.status == 304)

{

IncludeJS( sId, url, oXmlHttp.responseText );

}

else

{

alert('XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')');

}

oXmlHttp.open('GET', url, true);

oXmlHttp.send(null);

}

function IncludeJS(sId, fileUrl, source)

{

if(source != null)

{

var scriptTag = document.getElementById(sId);

var oHead = document.getElementsByTagName('HEAD').item(0);

if(scriptTag)

{

oHead.removeChild(scriptTag);

}

var oScript = document.createElement( "script" );

oScript.language = "javascript";

oScript.type = "text/javascript";

oScript.id = sId;

oScript.defer = true;

oScript.text = source;

oHead.appendChild(oScript);

checkBtnTest(sId);

}

function checkBtnTest(sId)

{

var scriptTag = document.getElementById(sId);

if(scriptTag)

{

document.getElementById('btnTest').setAttribute('disabled', false);

}

else

{

document.getElementById('btnTest').setAttribute('disabled', true);

}

3. js1.js 和 js2.js

function test()

{

alert('js1.js');

}

function test()

{

alert('js2.js');

}

4. 动态加CSS样式

function IncludeCSS(sId, fileUrl)

{

var cssTag = document.getElementById(sId);

var oHead = document.getElementsByTagName('HEAD').item(0);

if(cssTag)

{

oHead.removeChild(cssTag);

}

var oCss = document.createElement('link');

oCss.id = sId;

oCss.href = fileUrl;

oCss.rel = 'stylesheet';

oCss.type = 'text/css';

oHead.appendChild(oCss);

}

转载于:https://www.cnblogs.com/hawkjin/archive/2008/07/22/1248900.html