JavaScript 動態(tài)加載腳本和樣式的方法
更新時間：2015年04月13日 15:50:22 投稿：mdxy-dxy
這篇文章主要介紹了JavaScript 動態(tài)加載腳本和樣式的方法,需要的朋友可以參考下
一 動態(tài)腳本
當(dāng)網(wǎng)站需求變大,腳本的需求也逐步變大;我們不得不引入太多的JS腳本而降低了整站的性能;
所以就出現(xiàn)了動態(tài)腳本的概念,在適時的時候加載相應(yīng)的腳本;
1.動態(tài)引入js文件
var flag = true;
if(flag){
loadScript('browserdetect.js'); // 調(diào)用函數(shù),引入路徑;
}
function loadScript(url){
var script = document.createElement('script'); // 創(chuàng)建script標(biāo)簽;
script.type = 'text/javascript'; // 設(shè)置type屬性;
script.src = url; // 引入url;
document.getElementsByTagName('head')[0].appendChild(script); // 將script引入<head>中;
}
2.動態(tài)執(zhí)行js代碼
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); // 設(shè)置script標(biāo)簽內(nèi)容;IE會報錯;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
// PS:IE瀏覽器認(rèn)為script是特殊元素,不能再訪問子節(jié)點(diǎn);
// 為了兼容,可以使用text屬性來代替;
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// IE瀏覽器認(rèn)為script是特殊元素,不能再訪問子節(jié)點(diǎn);報錯;
script.appendChild(document.createTextNode(code)); // W3C方式;
}catch(ex){
script.text = code; // IE方式;
}
document.body.appendChild(script);
}
// 調(diào)用;
loadScriptString("function sayHi(){alert('hi')}");
二 動態(tài)樣式
為了動態(tài)的加載樣式表,比如切換網(wǎng)站皮膚;
樣式有兩種方式進(jìn)行加載,一種是<link>標(biāo)簽,一種是<style>標(biāo)簽;
1.動態(tài)引入link文件
var flag = true;
if(flag){
loadStyles('basic.css'); // 調(diào)用函數(shù),引入路徑;
}
function loadStyles(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
2.動態(tài)執(zhí)行style代碼
var flag = true;
if(flag){
var style = docuemnt.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
// 如果是非IE;
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
// 如果是IE;
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
// 動態(tài)執(zhí)行style2
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
// IE會報錯;不允許向<style>元素添加子節(jié)點(diǎn);
style.appendChild(document.createTextNode(css));
}catch(ex){
// 此時,訪問元素的StyleSheet屬性,該屬性有有一個cssText屬性,可以接受CSS代碼;
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
// 調(diào)用;
loadStyleString("body {background-color:red}");
相關(guān)文章
在開發(fā)小程序的時候我們總是能遇到各種奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序返回上一頁的各種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了display和visibility的區(qū)別,需要的朋友可以參考下2014-02-02
符合W3C Web標(biāo)準(zhǔn)的圖片連續(xù)無間隙水平滾動
很久以前就有這個問題，總是找不到通用的，或比較簡單的“圖片連續(xù)無間隙向左滾動，無間隙向右滾動，符合W3C Web標(biāo)準(zhǔn)”2008-06-06
躲避這些會改變原數(shù)組JavaScript數(shù)組方法讓開發(fā)流暢無阻
JavaScript中有些數(shù)組的操作方法并不符合我們預(yù)期，容易導(dǎo)致想象不到的結(jié)果，因此，為避免這種情況的發(fā)生，本文將介紹哪些原生數(shù)組方法能改變原數(shù)組以及我對于如何更好地使用數(shù)組方法的建議2023-05-05
下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
使用postMesssage()實(shí)現(xiàn)iframe跨域頁面間的信息傳遞
這篇文章主要介紹了使用postMesssage()實(shí)現(xiàn)iframe跨域頁面間的信息傳遞 的相關(guān)資料,需要的朋友可以參考下
2016-03-03 
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)時間軸自動播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08 
javascript:void(0)的真正含義實(shí)例分析
void操作符解釋
2008-08-08 
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)字符數(shù)組的兩種方式
在 JavaScript 的編程世界里,字符串和數(shù)組是極為常見的數(shù)據(jù)類型,在實(shí)際開發(fā)中,我們常常會遇到需要將字符串轉(zhuǎn)換為字符數(shù)組的情況,接下來,我們將深入探討如何使用 JavaScript 實(shí)現(xiàn)這一轉(zhuǎn)換,同時結(jié)合代碼示例詳細(xì)分析不同方法的特點(diǎn),需要的朋友可以參考下
2025-04-04