使javascript也能包含文件


Posted in Javascript onOctober 26, 2006

javascript功能强大,但一个问题是它不能包含其它的js文件,而其它非脚本语言却基本都是有这个功能的,不得不觉得有点遗憾。穷则思变,越来越发现不动态导入文件会严重加大加载页面的时间,经过实验,发现了一个办法,利用xhtml来实现这个功能,下面的函数就可以动态导入javascript文件和css样式文件: 

function $import(path,type,title){ 
 var s,i; 
 if(type=="js"){ 
  var ss=document.getElementsByTagName("script"); 
  for(i=0;i<ss.length;i++){ 
   if(ss[i].src && ss[i].src.indexOf(path)!=-1)return; 
  } 
  s=document.createElement("script"); 
  s.type="text/javascript"; 
  s.src=path; 
 }else if(type=="css"){ 
  var ls=document.getElementsByTagName("link"); 
  for(i=0;i<ls.length;i++){ 
   if(ls[i].href && ls[i].href.indexOf(path)!=-1)return; 
  } 
  s=document.createElement("link"); 
  s.rel="alternate stylesheet"; 
  s.type="text/css"; 
  s.href=path; 
  s.title=title; 
  s.disabled=false; 
 } 
 else return; 
 var head=document.getElementsByTagName("head")[0]; 
 head.appendChild(s); 
}

对于样式文件,默认导入后是立即生效的,这有可能会导致和前面一种选定样式效果重叠,造成混乱。所以在我的blog中是使用下面的函数来实现样式的切换功能: 

 
function setStyle(title) { 
 var i, links,eflag=false; 
 links = document.getElementsByTagName("link"); 
 for(i=0; links[i]; i++) { 
  if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) { 
   links[i].disabled = true; 
   if(links[i].getAttribute("title").indexOf(title) != -1){links[i].disabled = false;eflag=true;} 
  } 
 } 
 if(!eflag){ 
  $import("skin/"+title+"/default.css","css",title); 
  setStyle(title); 
 } 
}

最后,说明一下,因为javascript文件是需要从远程加载的,所以有人可能会问在调用$import()函数后,是立即执行$import()后面的语句,还是等加载完以后再执行其后的语句。我粗略试验了一下,发现是等加载完后再执行后面的语句的,而且如果加载的js里有立即执行的代码,那么它会先于$import()后面的语句执行。这也是我们想要的结果,因为这样就可以在$import()之后调用加载的文件里的函数了。
Javascript 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 #Javascript
如何用javascript控制上传文件的大小
Oct 26 #Javascript
动态改变textbox的宽高的js
Oct 26 #Javascript
js传值 判断
Oct 26 #Javascript
点击广告后才能获得下载地址
Oct 26 #Javascript
PJBlog插件 防刷新的在线播放器
Oct 25 #Javascript
PJ Blog修改-禁止复制的代码和方法
Oct 25 #Javascript
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JS作用域深度解析
2016/12/29 Javascript
JSONP跨域请求
2017/03/02 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
利用Python如何生成便签图片详解
2018/07/09 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python实现根据文件格式分类
2019/10/31 Python
如何获取Python简单for循环索引
2019/11/21 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
临时租车协议范本
2014/09/23 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js