通过JavaScript+IFRAME实现页面分屏加载

[b]前言：[/b]
为了篇幅太长会影响到阅读兴趣，代码都不粘贴太多，最好配合源码阅读，不然又些地方你会有点不明白。

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

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

先给大家介绍两个JS元素①
[quote]clientHeight
只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

contentDocument
contentDocum ent 属性以 HTML 对象返回框架容纳的文档。
可以通过所有标准的 DOM 方法来处理被返回的对象。
[/quote]

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

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

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

[b]浏览器兼容中的HTML标签问题？[/b]

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

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

frame.height = frame.body.clientHeight

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

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>

[b]部分源码：[/b]


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

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

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

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

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

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