一种动态加载js和css文件的方法
【技术领域】
[0001]本发明涉及WEB开发技术领域，具体涉及一种动态加载JS和CSS文件的方法。
【背景技术】
[0002]在WEB开发过程中，一种常见的情景是对JS或CSS文件的固定引用。但是由于在特定情况下有时对JS或CSS文件引用的不确定性，或者在不同的情况下需要展示不同的效果而要引用不同的JS或CSS文件时，就需要对JS或CSS文件进行动态加载处理。
【发明内容】
[0003]本发明解决的技术问题在于提供一种动态加载JS和CSS文件的方法，解决WEB开发中动态加载JS或CSS文件的问题。
[0004]本发明解决上述技术问题的技术方案是:
[0005]所述的方法包含以下几个步骤:
[0006]步骤一、创建一个WEB页面；
[0007]步骤二、指定将要动态加载的JS或CSS文件；
[0008]步骤三、使用DOM创建〈script〉或者〈link〉标签，为其添加属性；
[0009]步骤四、把已创建的〈script〉或〈link〉标签动态绑定到〈head〉标签中；
[0010]步骤五、当页面加载，执行动态绑定的〈script〉或〈link〉标签，动态加载已指定的JS或CSS文件。
[0011]所述的步骤一的WEB页面是将要动态引用外部JS或CSS文件的页面。
[0012]所述的步骤二中同时指定以及指定其引用的动态路径。
[0013]所述的步骤四中，将已创建的〈script〉或〈link〉标签通过JavaScript的appendChild方法动态绑定到〈head〉标签中；同时判断是否已绑定，防止同一文件二次绑定加载而出现异常。
[0014]本发明通过动态创建的〈script〉或〈link〉标签，然后将其动态绑定到〈head〉标签中，当前页面加载时，即可动态引用指定的文件。解决了在WEB开发过程中，由于在特定情况下对引用的JS或CSS文件的不确定性，或者在引用不同的JS或CSS需要展示不同的效果时，需要对JS或CSS文件进行动态处理的问题；可以提高代码的复用率，减少代码量。
【附图说明】
[0015]下面结合附图对本发明进一步说明:
[0016]附图1是本发明方法流程框图。
【具体实施方式】
[0017]如图1所示，本发明具体包含以下几个步骤:
[0018]步骤一:创建一个WEB页面，即为将要动态引用外部JS或CSS文件的页面；
[0019]步骤二:指定将要动态引用的JS文件或CSS文件，以及指定其引用的动态路径；
[0020]例如两个动态文件:
[0021]JS 文件:loadjs.js
[0022]CSS 文件:1adCss.css
[0023]步骤三:使用DOM创建〈script〉或〈link〉标签，并为其添加属性，如type，src等;
[0024]关键代码:
[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]步骤四:将已创建的〈script〉或〈link〉标签通过JavaScript的appendChild方法动态绑定到〈head〉标签中，同时判断是否已绑定，防止同一文件二次绑定加载而出现异常；
[0035]关键代码:
[0036]if (typeof fileref ! = " undefine ?" ){
[0037]document.getElementsByTagName{" head" )[0].appendChild(fileRef)；
[0038]}。
【主权项】
1.一种动态加载JS和CSS文件的方法，其特征在于:所述的方法包含以下几个步骤: 步骤一、创建一个WEB页面； 步骤二、指定将要动态加载的JS或CSS文件； 步骤三、使用DOM创建〈script〉或者〈link〉标签，为其添加属性； 步骤四、把已创建的〈script〉或〈link〉标签动态绑定到〈head〉标签中； 步骤五、当页面加载，执行动态绑定的〈script〉或〈link〉标签，动态加载已指定的JS或CSS文件。
2.根据权利要求1所述的动态加载JS和CSS文件的方法，其特征在于:所述的步骤一的WEB页面是将要动态引用外部JS或CSS文件的页面。
3.根据权利要求1所述的动态加载JS和CSS文件的方法，其特征在于:所述的步骤二中同时指定以及指定其引用的动态路径。
4.根据权利要求2所述的动态加载JS和CSS文件的方法，其特征在于:所述的步骤二中同时指定以及指定其引用的动态路径。
5.根据权利要求1至4任一项所述的动态加载JS和CSS文件的方法，其特征在于:所述的步骤四中，将已创建的〈script〉或〈link〉标签通过JavaScript的appendChild方法动态绑定到〈head〉标签中；同时判断是否已绑定，防止同一文件二次绑定加载而出现异常。
【专利摘要】本发明涉及WEB开发技术领域，具体涉及一种动态加载JS和CSS文件的方法。本发明方法通过JavaScript动态创建DOM标签，并为其添加必要的属性，然后使用appendChild方法把它绑定到另一个标签，在页面加载时就会执行动态加载JS或CSS文件的方法，从而动态加载JS或CSS文件。本发明解决了在WEB开发过程中，由于在特定情况下对引用的JS或CSS文件的不确定性，或者在引用不同的JS或CSS需要展示不同的效果时，需要对JS或CSS文件进行动态处理的问题，可广泛应用于WEB开发中。
【IPC分类】G06F9-445
【公开号】CN104866347
【申请号】CN201510266820
【发明人】丁继锋, 徐震宇, 孙傲冰, 季统凯
【申请人】国云科技股份有限公司
【公开日】2015年8月26日
【申请日】2015年5月22日