动态载入 JavaScript/Csss 文件
传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加:
复制代码 代码如下:
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
这些文件用这种方式会同步加载到当前这个页面。
现在用动态的方式载入JavaScript/Css文件：
用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
设置相应的属性
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
这些文件用这种方式会同步加载到当前这个页面。
现在用动态的方式载入JavaScript/Css文件：
用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
设置相应的属性
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾
复制代码 代码如下:
function loadjscssfile(filename, filetype){
//如果文件类型为 .js ,则创建 script 标签，并设置相应属性
if (filetype=="js"){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
//如果文件类型为 .css ,则创建 script 标签，并设置相应属性
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);
}
//动态添加一个.js 文件
loadjscssfile("myscript.js", "js");
//像添加.js文件一样，动态添加一个.php文件
loadjscssfile("javascript.php", "js");
//动态一个.css文件
loadjscssfile("mystyle.css", "css");
为了防止多次载入同一个js/css文件， 添加以下判断（这只是粗略检测） 复制代码 代码如下:
//临时载入的文件名
var filesadded="";
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype);
//把 [filename] 存入 filesadded
filesadded+="["+filename+"]";
}
else{
alert("file already added!");
}
//第一次载入
checkloadjscssfile("myscript.js", "js");
//重复载入同一个文件， 失败
checkloadjscssfile("myscript.js", "js");
动态删除 JavaScript/Csss 文件
注意：ie6/7 下动态删除样式时有bug. 2种解决方案：1.样式表里不要有import的样式表 2.把link的type属性设置为空值， 然后再修改 href 的地， 或者直接设置href为空， 最后再把type值设置成”text/css” 强制让ie解释新的样式表。
取得相应的 DOM 元素
根据 文件名&文件类型 定位元素
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素
function loadjscssfile(filename, filetype){
//如果文件类型为 .js ,则创建 script 标签，并设置相应属性
if (filetype=="js"){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
//如果文件类型为 .css ,则创建 script 标签，并设置相应属性
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);
}
//动态添加一个.js 文件
loadjscssfile("myscript.js", "js");
//像添加.js文件一样，动态添加一个.php文件
loadjscssfile("javascript.php", "js");
//动态一个.css文件
loadjscssfile("mystyle.css", "css");
为了防止多次载入同一个js/css文件， 添加以下判断（这只是粗略检测） 复制代码 代码如下:
//临时载入的文件名
var filesadded="";
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype);
//把 [filename] 存入 filesadded
filesadded+="["+filename+"]";
}
else{
alert("file already added!");
}
//第一次载入
checkloadjscssfile("myscript.js", "js");
//重复载入同一个文件， 失败
checkloadjscssfile("myscript.js", "js");
动态删除 JavaScript/Csss 文件
注意：ie6/7 下动态删除样式时有bug. 2种解决方案：1.样式表里不要有import的样式表 2.把link的type属性设置为空值， 然后再修改 href 的地， 或者直接设置href为空， 最后再把type值设置成”text/css” 强制让ie解释新的样式表。
取得相应的 DOM 元素
根据 文件名&文件类型 定位元素
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素
function removejscssfile(filename, filetype){
//判断文件类型
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
//判断文件名
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
//遍历元素， 并删除匹配的元素
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]);
}
}
removejscssfile("somescript.js", "js");
removejscssfile("somestyle.css", "css");
动态更新 JavaScript/Csss 文件
使用 createElement 创建 要更新的 JavaScript/Css 元素
查找要被替换的元素
用 replaceChild 替换元素
复制代码 代码如下:
function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}
function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype);
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);
}
}
}
//用 "newscript.js" 替换 "oldscript.js"
replacejscssfile("oldscript.js", "newscript.js", "js")；
//用 "newscript.css" 替换 "oldscript.css"
replacejscssfile("oldstyle.css", "newscript.css","css");
function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}
function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype);
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);
}
}
}
//用 "newscript.js" 替换 "oldscript.js"
replacejscssfile("oldscript.js", "newscript.js", "js")；
//用 "newscript.css" 替换 "oldscript.css"
replacejscssfile("oldstyle.css", "newscript.css","css");
相关推荐
- **加载JS文件**：通过`loadExternalScript`函数将外部JavaScript文件添加到页面中。 - **加载CSS文件**：通过`loadExternalStyle`函数将外部CSS文件添加到页面中。 4. **执行JS代码**： - **执行内联JS代码**：...
这可以通过CSS和JavaScript组合实现，例如使用CSS3动画或JavaScript动态改变元素的样式。以下是一个简单的例子，创建一个旋转的加载图标： ```css .loading-spinner { width: 20px; height: 20px; border: 3px ...
此外，IE9和IE10对CSS文件的请求可能会受到缓存策略的影响，导致更新的样式无法即时生效。 解决IE9和IE10本地CSS加载不上的问题，我们可以尝试以下几种方法： 1. **禁用缓存**：在开发过程中，浏览器缓存可能会...
XML（Extensible Markup Language）是一种...总结来说，XML外部载入图片涉及XML解析、URL处理、图片显示以及可能的样式和布局管理等多个步骤。通过理解这些知识点，开发者可以构建出能够灵活处理图像数据的应用程序。
JSLoader是一种利用JavaScript实现的文件加载工具，它主要用于动态地加载外部资源，如JavaScript文件、CSS样式表、图片等，并且在加载过程中提供进度反馈，以提升用户体验。在Web开发中，尤其在处理大量异步加载时，...
7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10.3 功能实现/234 7.10.4 代码分析/236 7.11 本章小结/241 第8章 jQuery UI插件/242 8.1 认识...
然而，实现难度较高，需要确保JavaScript文件中的代码能够正确执行，并且不会与主页面中的其他脚本产生冲突。 总结来说，上述三种方法各有优缺点。在实际开发中，开发者应根据项目的具体需求和外部页面的特性来选择...
注意，加载本地文件时，为了保证安全性，通常会禁用WebView的JavaScript执行，但若需要执行JavaScript代码，可以使用`webView.getSettings().setJavaScriptEnabled(true);`来启用。 在实际应用中，我们可能还需要对...
它与CSS（Cascading Style Sheets）和JavaScript一起，构成了现代网页开发的三大核心技术。HTML可以包含文本、图像、链接等元素，并通过CSS进行样式定义，JavaScript则负责添加动态功能。 “Flash载入HTML”的技术...
外部JavaScript文件 5 1.3 第一个JavaScript程序 7 1.4 把文本写到Web页面上 9 1.5 附件外部JavaScript文件 10 1.6 追踪错误 12 1.6.1 Firefox JavaScript控制台 13 1.6.2 显示Internet Explorer错误对话框 14 1.6.3...
- **外部调用**：将CSS代码写在一个单独的.css文件中，并通过`<link rel="stylesheet" type="text/css" href="styles.css">`链接到HTML文档。 - **双表法**：使用两份样式表，一份用于普通浏览，另一份用于打印或...
第5章 动态修改样式和层叠样式表 5.1 W3CDOM2样式规范 5.1.1 CSSStyleSheet对象 5.1.2 CSSStyleRule对象 5.1.3 CSSStyleDeclaration对象 5.1.4 支持的匮乏 5.2 当DOM 脚本遇到...
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序内部显示网页内容，而不需跳转到外部浏览器。WebView不仅支持HTML，还支持CSS、JavaScript等网页技术，为用户提供了一种方便的方式在原生应用中...
文件列表中的`index.html`是项目的主入口文件，通常包含HTML结构、引用的外部CSS和JavaScript文件，以及可能的内联JavaScript代码。在这个案例中，`index.html`很可能是用来展示四角遮罩效果的网页，可能包含了KISSY...
• 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...
9. 载入速度优化：减少HTTP请求，合并CSS和JavaScript文件，压缩图片，利用CDN（内容分发网络）等方法，可以提高网页加载速度，提升用户体验。 10. W3C标准：遵循W3C制定的HTML和CSS规范，可以确保代码质量，并有助...
这个"完整版检测浏览器网页是否载入完毕例程"提供了一种方法来解决这个问题。下面将详细解释这一技术及其应用场景。 首先，我们需要理解浏览器加载网页的过程。当用户在浏览器中输入URL并按下回车键，浏览器会向...
1. 尽量减少CSS文件大小：通过压缩、去除空格和注释来减小文件体积，使用CSS预处理器（如Sass或Less）来组织代码，提高可读性和可维护性。 2. 优化选择器：使用更具体的选择器（如ID和类）来提升性能，避免使用...