今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码:
dynamicLoading
css path
path pathlength
Error
head documentgetElementsByTagName
link documentcreateElement
linkhref path
linkrel
linktype
headappendChildlink
js path
path pathlength
Error
head documentgetElementsByTagName
script documentcreateElement
scriptsrc path
scripttype
headappendChildscript
对象包含两个完全独立的方法,分别用来加载 CSS 文件和 JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到 head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,实乃 web 开发人员工作常备代码,请放心使用。
下面是调用代码,异常简单:
dynamicLoadingcss
dynamicLoadingjs
这里还提供了本文的 demo ,下载、解压,如果一切正常,打开 HTML 文件,页面将弹出对话框,并呈现鲜艳的红色,这说明它已经成功地动态加载了外部的 CSS 和 JS 文件。