本发明专利技术涉及WEB开发技术领域，具体涉及一种动态加载JS和CSS文件的方法。本发明专利技术方法通过JavaScript动态创建DOM标签，并为其添加必要的属性，然后使用appendChild方法把它绑定到另一个标签，在页面加载时就会执行动态加载JS或CSS文件的方法，从而动态加载JS或CSS文件。本发明专利技术解决了在WEB开发过程中，由于在特定情况下对引用的JS或CSS文件的不确定性，或者在引用不同的JS或CSS需要展示不同的效果时，需要对JS或CSS文件进行动态处理的问题，可广泛应用于WEB开发中。
【技术实现步骤摘要】
本专利技术涉及WEB开发
，具体涉及一种动态加载JS和CSS文件的方法。
技术介绍
在WEB开发过程中，一种常见的情景是对JS或CSS文件的固定引用。但是由于在特定情况下有时对JS或CSS文件引用的不确定性，或者在不同的情况下需要展示不同的效果而要引用不同的JS或CSS文件时，就需要对JS或CSS文件进行动态加载处理。
技术实现思路
本专利技术解决的技术问题在于提供一种动态加载JS和CSS文件的方法，解决WEB开发中动态加载JS或CSS文件的问题。本专利技术解决上述技术问题的技术方案是:所述的方法包含以下几个步骤:步骤一、创建一个WEB页面；步骤二、指定将要动态加载的JS或CSS文件；步骤三、使用DOM创建〈script〉或者〈link〉标签，为其添加属性；步骤四、把已创建的〈script〉或〈link〉标签动态绑定到〈head〉标签中；步骤五、当页面加载，执行动态绑定的〈script〉或〈link〉标签，动态加载已指定的JS或CSS文件。所述的步骤一的WEB页面是将要动态引用外部JS或CSS文件的页面。所述的步骤二中同时指定以及指定其引用的动态路径。所述的步骤四中，将已创建的〈script〉或〈link〉标签通过JavaScript的appendChild方法动态绑定到〈head〉标签中；同时判断是否已绑定，防止同一文件二次绑定加载而出现异常。本专利技术通过动态创建的〈script〉或〈link〉标签，然后将其动态绑定到〈head〉标签中，当前页面加载时，即可动态引用指定的文件。解决了在WEB开发过程中，由于在特定情况下对引用的JS或CSS文件的不确定性，或者在引用不同的JS或CSS需要展示不同的效果时，需要对JS或CSS文件进行动态处理的问题；可以提高代码的复用率，减少代码量。【附图说明】下面结合附图对本专利技术进一步说明:附图1是本专利技术方法流程框图。【具体实施方式】如图1所示，本专利技术具体包含以下几个步骤:步骤一:创建一个WEB页面，即为将要动态引用外部JS或CSS文件的页面；步骤二:指定将要动态引用的JS文件或CSS文件，以及指定其引用的动态路径；例如两个动态文件:JS 文件:loadjs.jsCSS 文件:1adCss.css步骤三:使用DOM创建〈script〉或〈link〉标签，并为其添加属性，如type，src等;关键代码:JS类型文件:var fiIeRef = document.createElement (r script')；fileRef.setAttribute(" type"，" text/javascript")；fileRef.setAttribute(" src"，" loadjs.js")；CSS类型文件:var fileRef = document.createElement (r link')；fileRef.setAttribute(" re I"，" stylesheet")；fileRef.setAttribute(" type"，" text/css")；fileRef.setAttribute(" href"，" 1adCss.css")；步骤四:将已创建的〈script〉或〈link〉标签通过JavaScript的appendChild方法动态绑定到〈head〉标签中，同时判断是否已绑定，防止同一文件二次绑定加载而出现异常；关键代码:if (typeof fileref ! = " undefine ?" ){document.getElementsByTagName{" head" ).appendChild(fileRef)；}。【主权项】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日本文档来自技高网...
【技术保护点】
一种动态加载JS和CSS文件的方法，其特征在于：所述的方法包含以下几个步骤：步骤一、创建一个WEB页面；步骤二、指定将要动态加载的JS或CSS文件；步骤三、使用DOM创建<script>或者<link>标签，为其添加属性；步骤四、把已创建的<script>或<link>标签动态绑定到<head>标签中；步骤五、当页面加载，执行动态绑定的<script>或<link>标签，动态加载已指定的JS或CSS文件。
【技术特征摘要】
【专利技术属性】
技术研发人员：丁继锋，徐震宇，孙傲冰，季统凯，
申请(专利权)人：国云科技股份有限公司，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。