使javascript也能包含文件

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()之后调用加载的文件里的函数了。

赞 (0)

相关推荐

  • 使javascript也能包含文件

    javascript功能强大,但一个问题是它不能包含其它的js文件,而其它非脚本语言却基本都是有这个功能的,不得不觉得有点遗憾.穷则思变,越来越发现不动态导入文件会严重加大加载页面的时间,经过实验,发现了一个办法,利用xhtml来实现这个功能,下面的函数就可以动态导入javascript文件和css样式文件:  复制代码 代码如下: function $import(path,type,title){  var s,i;  if(type=="js"){   var ss=docume

  • JavaScript File API实现文件上传预览

    JavaScript File API实现文件上传预览

    一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽

  • ASP中利用execute实现动态包含文件的方法

    摘要:本文介绍了ASP中动态包含ASP文件,并使其中ASP类(Class)可实例化的方法. ASP中,include file/virtual 是优先脚本代码处理的,所以无法使用include动态包含ASP文件.我们可以使用Execute函数动态执行所需代码. 方法: Execute(ASP代码) 例子:(vbCrLf为换行符) 复制代码 代码如下: Execute("Class clsAbc"&vbCrLf&"Public Function output&q

  • JavaScript实现清空(重置)文件类型INPUT元素值的方法

    本文实例讲述了JavaScript实现清空(重置)文件类型INPUT元素值的方法.分享给大家供大家参考,具体如下: 因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置. 重置一个文件域的值,归纳起来主要有 3 种方法. 本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo. 重置文件域的三种方法: 1. 设置value属性为空. 对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Ope

  • PHP包含文件函数include、include_once、require、require_once区别总结

    例如下面的代码: 复制代码 代码如下: include('hello.php'); echo 'include test final!';//include报错,但是会继续执行,显示:include test final! require('hello.php'); echo 'require test final!';//require报错,停止代码的执行. 一句话总结:1.include() 产生一个警告2.require()  则导致一个致命错误 换句话说,如果你想在丢失文件时停止处理页面

  • Apache下开启SSI配置使html支持include包含的方法

    写页面的同学通常会遇到这样的烦恼,就是页面上的 html 标签越来越多的时候,寻找指定的部分就会很困难,那么能不能像 javascript 一样写在不同的文件中引入呢?答案是有的,apache 能做到. 举个简单的例子,比如有如下的 html 文件(命名为 index.html): <input type='text' /> <input type='button' value='press' /> 一个简单的文本框和按钮,我现在想把按钮部分的 html 写在另一个 .html 的

  • JavaScript进阶之前端文件上传和下载示例详解

    JavaScript进阶之前端文件上传和下载示例详解

    目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</

  • JavaScript实现控制打开文件另存为对话框的方法

    本文实例讲述了JavaScript实现控制打开文件另存为对话框的方法.分享给大家供大家参考.具体如下: 这里通过JS打开图片另存为对话框,提示用户保存文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator&

  • javascript自动生成包含数字与字符的随机字符串

    本文实例讲述了javascript自动生成包含数字与字符的随机字符串的方法.分享给大家供大家参考.具体如下: 这里主要用到Math.random() 和 Math.floor() 两个函数 Math.random()   -- 返回0和1之间的伪随机数 可能为0,但总是小于1,[0,1) Math.floor()    -- 向下取整,舍掉小数字后的值 实现随机多位数的方法: 复制代码 代码如下: /** * *    随机生成数字 * *@param num 生成数字位数 */  functi

  • 兼容Firefox的Javascript XSLT 处理XML文件

    最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器.而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX来做的. 无奈中,自己写了一个Javascript XSLT处理XML展现页面的小功能.现在帖出来和大家共享,希望大家给点改进意见.     在Firefox中使用XSLTProcessor对象处理XML,主要使用该对象的两个方法: 一.transformToFragment(). 二.transf

随机推荐