一種動(dòng)態(tài)加載js和css文件的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及WEB開發(fā)技術(shù)領(lǐng)域，具體涉及一種動(dòng)態(tài)加載JS和CSS文件的方法。
【背景技術(shù)】
[0002]在WEB開發(fā)過程中，一種常見的情景是對(duì)JS或CSS文件的固定引用。但是由于在特定情況下有時(shí)對(duì)JS或CSS文件引用的不確定性，或者在不同的情況下需要展示不同的效果而要引用不同的JS或CSS文件時(shí)，就需要對(duì)JS或CSS文件進(jìn)行動(dòng)態(tài)加載處理。

【發(fā)明內(nèi)容】

[0003]本發(fā)明解決的技術(shù)問題在于提供一種動(dòng)態(tài)加載JS和CSS文件的方法，解決WEB開發(fā)中動(dòng)態(tài)加載JS或CSS文件的問題。
[0004]本發(fā)明解決上述技術(shù)問題的技術(shù)方案是:
[0005]所述的方法包含以下幾個(gè)步驟:
[0006]步驟一、創(chuàng)建一個(gè)WEB頁面；
[0007]步驟二、指定將要?jiǎng)討B(tài)加載的JS或CSS文件；
[0008]步驟三、使用DOM創(chuàng)建〈script〉或者〈link〉標(biāo)簽，為其添加屬性；
[0009]步驟四、把已創(chuàng)建的〈script〉或〈link〉標(biāo)簽動(dòng)態(tài)綁定到〈head〉標(biāo)簽中；
[0010]步驟五、當(dāng)頁面加載，執(zhí)行動(dòng)態(tài)綁定的〈script〉或〈link〉標(biāo)簽，動(dòng)態(tài)加載已指定的JS或CSS文件。
[0011]所述的步驟一的WEB頁面是將要?jiǎng)討B(tài)引用外部JS或CSS文件的頁面。
[0012]所述的步驟二中同時(shí)指定以及指定其引用的動(dòng)態(tài)路徑。
[0013]所述的步驟四中，將已創(chuàng)建的〈script〉或〈link〉標(biāo)簽通過JavaScript的appendChild方法動(dòng)態(tài)綁定到〈head〉標(biāo)簽中；同時(shí)判斷是否已綁定，防止同一文件二次綁定加載而出現(xiàn)異常。
[0014]本發(fā)明通過動(dòng)態(tài)創(chuàng)建的〈script〉或〈link〉標(biāo)簽，然后將其動(dòng)態(tài)綁定到〈head〉標(biāo)簽中，當(dāng)前頁面加載時(shí)，即可動(dòng)態(tài)引用指定的文件。解決了在WEB開發(fā)過程中，由于在特定情況下對(duì)引用的JS或CSS文件的不確定性，或者在引用不同的JS或CSS需要展示不同的效果時(shí)，需要對(duì)JS或CSS文件進(jìn)行動(dòng)態(tài)處理的問題；可以提高代碼的復(fù)用率，減少代碼量。
【附圖說明】
[0015]下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說明:
[0016]附圖1是本發(fā)明方法流程框圖。
【具體實(shí)施方式】
[0017]如圖1所示，本發(fā)明具體包含以下幾個(gè)步驟:
[0018]步驟一:創(chuàng)建一個(gè)WEB頁面，即為將要?jiǎng)討B(tài)引用外部JS或CSS文件的頁面；
[0019]步驟二:指定將要?jiǎng)討B(tài)引用的JS文件或CSS文件，以及指定其引用的動(dòng)態(tài)路徑；
[0020]例如兩個(gè)動(dòng)態(tài)文件:
[0021]JS 文件:loadjs.js
[0022]CSS 文件:1adCss.css
[0023]步驟三:使用DOM創(chuàng)建〈script〉或〈link〉標(biāo)簽，并為其添加屬性，如type，src等;
[0024]關(guān)鍵代碼:
[0025]JS類型文件:
[0026]var fiIeRef = document.createElement (r script')；
[0027]fileRef.setAttribute(" type"，" text/javascript")；
[0028]fileRef.setAttribute(" src"，" loadjs.js")；
[0029]CSS類型文件:
[0030]var fileRef = document.createElement (r link')；
[0031]fileRef.setAttribute(" re I"，" stylesheet")；
[0032]fileRef.setAttribute(" type"，" text/css")；
[0033]fileRef.setAttribute(" href"，" 1adCss.css")；
[0034]步驟四:將已創(chuàng)建的〈script〉或〈link〉標(biāo)簽通過JavaScript的appendChild方法動(dòng)態(tài)綁定到〈head〉標(biāo)簽中，同時(shí)判斷是否已綁定，防止同一文件二次綁定加載而出現(xiàn)異常；
[0035]關(guān)鍵代碼:
[0036]if (typeof fileref ! = " undefine ?" ){
[0037]document.getElementsByTagName{" head" )[0].appendChild(fileRef)；
[0038]}。
【主權(quán)項(xiàng)】
1.一種動(dòng)態(tài)加載JS和CSS文件的方法，其特征在于:所述的方法包含以下幾個(gè)步驟: 步驟一、創(chuàng)建一個(gè)WEB頁面； 步驟二、指定將要?jiǎng)討B(tài)加載的JS或CSS文件； 步驟三、使用DOM創(chuàng)建〈script〉或者〈link〉標(biāo)簽，為其添加屬性； 步驟四、把已創(chuàng)建的〈script〉或〈link〉標(biāo)簽動(dòng)態(tài)綁定到〈head〉標(biāo)簽中； 步驟五、當(dāng)頁面加載，執(zhí)行動(dòng)態(tài)綁定的〈script〉或〈link〉標(biāo)簽，動(dòng)態(tài)加載已指定的JS或CSS文件。
2.根據(jù)權(quán)利要求1所述的動(dòng)態(tài)加載JS和CSS文件的方法，其特征在于:所述的步驟一的WEB頁面是將要?jiǎng)討B(tài)引用外部JS或CSS文件的頁面。
3.根據(jù)權(quán)利要求1所述的動(dòng)態(tài)加載JS和CSS文件的方法，其特征在于:所述的步驟二中同時(shí)指定以及指定其引用的動(dòng)態(tài)路徑。
4.根據(jù)權(quán)利要求2所述的動(dòng)態(tài)加載JS和CSS文件的方法，其特征在于:所述的步驟二中同時(shí)指定以及指定其引用的動(dòng)態(tài)路徑。
5.根據(jù)權(quán)利要求1至4任一項(xiàng)所述的動(dòng)態(tài)加載JS和CSS文件的方法，其特征在于:所述的步驟四中，將已創(chuàng)建的〈script〉或〈link〉標(biāo)簽通過JavaScript的appendChild方法動(dòng)態(tài)綁定到〈head〉標(biāo)簽中；同時(shí)判斷是否已綁定，防止同一文件二次綁定加載而出現(xiàn)異常。
【專利摘要】本發(fā)明涉及WEB開發(fā)技術(shù)領(lǐng)域，具體涉及一種動(dòng)態(tài)加載JS和CSS文件的方法。本發(fā)明方法通過JavaScript動(dòng)態(tài)創(chuàng)建DOM標(biāo)簽，并為其添加必要的屬性，然后使用appendChild方法把它綁定到另一個(gè)標(biāo)簽，在頁面加載時(shí)就會(huì)執(zhí)行動(dòng)態(tài)加載JS或CSS文件的方法，從而動(dòng)態(tài)加載JS或CSS文件。本發(fā)明解決了在WEB開發(fā)過程中，由于在特定情況下對(duì)引用的JS或CSS文件的不確定性，或者在引用不同的JS或CSS需要展示不同的效果時(shí)，需要對(duì)JS或CSS文件進(jìn)行動(dòng)態(tài)處理的問題，可廣泛應(yīng)用于WEB開發(fā)中。
【IPC分類】G06F9-445
【公開號(hào)】CN104866347
【申請(qǐng)?zhí)枴緾N201510266820
【發(fā)明人】丁繼鋒, 徐震宇, 孫傲冰, 季統(tǒng)凱
【申請(qǐng)人】國云科技股份有限公司
【公開日】2015年8月26日
【申請(qǐng)日】2015年5月22日