本地包含的JS

功能说明：本地包含
应用平台：IE6
应用场景：做快速原型时有点用
背景：公司做小项目比较多，经常要做快速原型，要做成页面，不能是PSD，PSD不能显示Flash，以及不能让客户在快速原型中点击链接进行浏览。

        又因为是快速原型，最好是不要使用服务端技术，像asp\php\jsp之类的就可以退散了，我们都是直接做HTML文件，打个包发给客户，客户解压后，可以看到非常显眼的一个主页文件（其它文件放在文件夹中，最外层只有一个主页文件），双击就会在浏览器中浏览了。

        在做网站时，公用部分比如页头、菜单、登陆区、页脚等改动会比较多，像菜单的组织方式改动，页脚区建设单位、联系方式、版权的说明文字改动等，这时我们会希望重用这些部分。我们一般有如下的做法：

• 使用服务端技术，用<include>包含
• 使用<frameset>或<iframe>分块处理
• 使用js文件引入，并在js文件里面写document.write()
• 还可以使用ajax去读另一个文件，再插入到合适的地方

       以上几种方法，服务端的<include>可以直接退散了，原因之前说过了；

       使用ajax去读另一个文件也不行，因为没有架设web服务器，ajax是不能直接读本地文件的，出于安全考虑，是没有这个权限的，这个看官们可以自己去试；

       使用<frameset>会且仅会占满一个屏幕，你想要一个滚动条？对不起，它会把你分成两个或更多个滚动条；

       使用<iframe>不能根据包含的内容自动设置高度，虽然我知道可以写一些代码来做到这一点，但我总是不能很好的调整好这个效果，也许是我不够精通此道，对于写代码来调整iframe的高度这事件，我感觉还是不靠谱；

       使用js文件引入，这个方法其实挺不错，唯一的缺点就是不够友好，在document.write()中的字符串，没有友好的格式，以及代码颜色；

      

       以上是背景，回到“本地包含”的问题上，这个本地包含的JS就是解决上面的问题的，不多说，直接上代码：

<script src="jquery.js"></script>
<script src="divsrc.js"></script>


<div src="header.html"></div>
<div src="menu.html" onload="selectMenu(0);"></div>

这里是首页内容啊，有木有！！！

<div src="footer.html"></div>

      divsrc.js 就是我写的东西啦，如何使用？<div>标签有src属性就行了，接下来分析实现思路。

      实现方式和ajax差不多，假设将b页面包含到a页面中，通过一种方式读取到b页面的代码，再插入到a页面中，关键就在这里。

• 在a页面中插入一个<iframe>，并设置为隐藏
• 动态设置iframe的src属性，让iframe加载b页面
• 通过iframe.contentWindow.document.body.innerHTML来访问b页面的代码
• 最后将读到的代码插入到合适的位置即可

      可以看到这是使用了一种比较另类的方式实现和ajax差不多效果的功能。

      然后，我们还需要再面临一些小问题。

• 在iframe内部页如果是本地磁盘的一个文件，在谷歌、火狐等浏览器上，同样会出现没有权限访问的吧？

　　　　是的，所以我这个JS只支持在IE6上工作，请原谅我还在使用IE6，我的客户都是IE6。

• 页面加载会有延迟吧？如何保证在iframe内部页加载完成之后，再读取内部页的内容？

　　　　首先，这个JS就是用于解决不使用服务端技术时，需要包含本地文件的场景，那么既然是本地，加载速度是很快的。
           当然，无论多快，总是会有延时的，这里我采用了每隔20毫秒去检查iframe加载完成了没有的办法（如果发现加载完成后，计时器就会结束）
　　　　可能不是很好，但我感觉还能接受。
　　　　我不想让开发人员一定要在b页面插入什么指定的代码。如果没有这个坚持，那我就可以去掉上面那个计时器方案，让这个JS工作得更好。

• b页面如果有js代码，会被执行两次吧？一次是在<iframe>中，一次在重新插入到a页面时。

　　　　是的，会执行两次，但这只是快速原型，两次就两次吧，客户不会察觉也不会介意的。只要我们正式运行在生产机上采用了服务端技术的程序没有这个问题就行。

• 我感觉这是一个好小的问题，有必要为一个这么小的问题搞得如此纠结吗？

　　　　代码能被重用，节省我很多时间，虽然是小问题，但很重要，看官要是不喜欢，就可以退散了。

 　　最后上divsrc.js的代码（需要jquery支持）：

$.fn.extend({divsrc:function(){
  var divs=this;
  
  var ifr=$('iframe[id=ifr_divsrc]');
  if(!ifr.length)ifr=$('<iframe src="" style="display:none;"></iframe>').appendTo(document.body);

  function ___divsrc___load(divs, i, init){
    var div=$(divs[i]);
    if(init){
      ifr.attr('src', div.attr('src'));
      setTimeout(function(){___divsrc___load(divs, i, false);}, 20);
    }else{
      if(!ifr[0].contentWindow||!ifr[0].contentWindow.document
          ||!ifr[0].contentWindow.document.body||!ifr[0].contentWindow.document.body.innerHTML){
        ___divsrc___load(divs, i, false);
      }else{
        div.html(ifr[0].contentWindow.document.body.innerHTML);
        if(div.attr('onload')) eval(div.attr('onload'));
        if(i<divs.length) ___divsrc___load(divs, i+1, true);
      }
    }
  }
  ___divsrc___load(divs, 0, true);
}});
$(function(){ $('div[src]').divsrc(); });

      还有全部源代码的下载： 点击下载html本地包含