通过JavaScript+IFRAME实现页面分屏加载
前言：
为了篇幅太长会影响到阅读兴趣，代码都不粘贴太多，最好配合源码阅读，不然又些地方你会有点不明白。

问题？
往往在项目中会展现很高的页面，为了考虑加载速度，我们会使用延迟加载，刚开始我只进行图片延迟加载，其后又发现不妥，因为一个页面的加载并非只有图片，这样的话，我们可以需要为整个页面分屏加载显示。

整个思路如下：
考虑到分屏最简单的就是把页面截成单个的IFRAME，这里我们使用这种方式进行解决此问题。

先给大家介绍两个JS元素①


整个解决问题的过程，最棘手的是ifreame的自适应高度的浏览器兼容问题。
说到兼容，浏览器之间的兼容性最常见的是JS元素不兼容，
例如：FF可用的元素IE不能用，IE能用的，偏偏FF不能用。

还有一种是在body等HTML标签的像素又些差异，
例如：iframe的高度都是100，在IE正好，在FF就显然不足够了。

既然兼容浏览器我也找不到什么好的办法，最直观而简单的就是多套方案。

浏览器兼容中的HTML标签问题？

var frame= document.frames?document.frames[i].document:frame.contentDocument;

这样我们获得了 document，值得庆幸的是 他们都能兼容clientHeight元素。
这样我们就可以使用通用的js元素获取iframe的高度了。

frame.height = frame.body.clientHeight

如何获取到客户端浏览器类型，并解决像素差异问题？

if(navigator.userAgent.indexOf("Firefox")>0) { // Mozilla, Safari ..
  frame.height = frame.body.clientHeight+20；
} else if (navigator.userAgent.indexOf("MSIE")>0) { // IE
  frame.height = frame.body.clientHeight+10；
} 

在框架自适应高度的时候，我碰到一个问题，就是IE统计不到ifreame的高度进行自适应，而FF可以，是不是IE加载iframe不能立即获取高度，然后我尝试在iframe onload事件触发initHeight()，结果真的是IE的问题②。

<iframe class="iframe" id="frame3" onload="initHeight()" src="about:blank" width="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

部分源码：


扩展阅读：
如果你想在这个基础上扩展下这个功能，可用利用滚动条事件。
例如：优先加载当前屏幕的数据（在用户直接拖动滚动条到低端时候）

function initEvents(){
  $(window).bind('scroll', function() {
     var margin_top = $(document).scrollTop(); // 滚动条上部距顶高度
  }
}

① javascript 的对象、属性。
② 这个问题只是个人推断，可信度不足，但有几分嫌疑。

Thank of：
感谢凯哥、继超同学 的 引导和帮助。

作者：
郝世博@郑州升博世纪
邮箱：winhunter@163.com

这里还有很多不足，望大家多多批评，批评的同时别忘了指出缺陷。