您的位置：首页 > Web前端 > CSS

JS动态加载JS与CSS文件

2012-10-05 15:13 369 查看

一 HTML页面 jsforjscss.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5 <script type="text/javascript" src="loadjscssfile.js"></script>

6 <title>无题目文档</title>

7 </head>

8 <body>

9 </body>

10 </html>

二动态加载js文件的法度 loadjscssfile.js

// JavaScript Document

function loadjscssfile（filename，filetype）{

if（filetype == "js"）{

var fileref = document.createElement（""script""）;

fileref.setAttribute（"type"，"text/javascript"）;

fileref.setAttribute（"src"，filename）;

}else if（filetype == "css"）{

var fileref = document.createElement（""link""）;

fileref.setAttribute（"rel"，"stylesheet"）;

fileref.setAttribute（"type"，"text/css"）;

fileref.setAttribute（"href"，filename）;

}

if（typeof fileref != "undefined"）{

document.getElementsByTagName（"head"）[0].appendChild（fileref）;

}

}

loadjscssfile（"do.js"，"js"）;

loadjscssfile（"test.css"，"css"）;

三被加载的 js文件：do.js

alert（"this is do"）;

四被加载的 css文件：test.css （css文件中还可以用＠import url（"menu.css"）; 引进其他css文件）

＠charset "utf-8";

＠import url（"menu.css"）;

＠import url（"../gundong.css"）;

body{

background-color:gray;

}

理论解析：

原懂得析：第一步：应用dom创建<script>或者<link>标签，并给他们附加属性，如type等第二步：应用appendChild办法把标签绑定到另一个标签，一般是绑到<head>.

应用：1、进步代码的复用，削减代码量；2、添加一个javascript把握器和 session可以实现动态改变页面样式；3、因为是页面是从上到下依次加载文件的，并且边加载边申明，所以可以添加javascript把握器把握页面文件的加载次序，如先加载css布局文件，再显示有图片的css美化文件，之后再加载大的falsh文件，或者安内容的首要性来加载。r

浏览提示：e文不好的初学者可以直接看中文，然后拷贝代码实验下。r

To load a .js or .css file dynamically， in a nutshell， it means using DOM methods to first create a swanky new "script" or "LINK" element， assign it the appropriate attributes， and finally， use element.appendChild（） to add the element to the desired location
within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:

function loadjscssfile（filename， filetype）{

if （filetype=="js"）{ //剖断文件类型

var fileref=document.createElement（""script""）//创建标签

fileref.setAttribute（"type"，"text/javascript"）//定义属性type的值为text/javascript

fileref.setAttribute（"src"， filename）//文件的地址

}

else if （filetype=="css"）{ //剖断文件类型

var fileref=document.createElement（"link"）

fileref.setAttribute（"rel"， "stylesheet"）

fileref.setAttribute（"type"， "text/css"）

fileref.setAttribute（"href"， filename）

}

if （typeof fileref!="undefined"）

document.getElementsByTagName（"head"）[0].appendChild（fileref）

}

loadjscssfile（"myscript.js"， "js"） //打开页面时浏览器动态的加载文件

loadjscssfile（"javascript.php"， "js"） // 打开页面时浏览器动态的加载"javascript.php" ，

loadjscssfile（"mystyle.css"， "css"） //打开页面时浏览器动态的加载.css 文件

接下来的工作是绑定到<head>标签。绑定的时辰有一个题目就是同一个文件有可能被我们绑定两次，绑定两次浏览器也不会呈现异常，然则效力就低了。为了避免r

这种景象我们可以新增一个全局数组变量，把绑定的文件名字保存在里面，每次绑定前先搜检一下是否已经存在，假如存在就提示已经存在，假如不存在就绑定。r

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航