完美世界有声小说,完美世界辰东小说下载,完美世界txt全集下载

通過JavaScript+IFRAME實(shí)現(xiàn)頁面分屏加載

2011-09-27 13:09:03

前言：
為了篇幅太長會影響到閱讀興趣，代碼都不粘貼太多，最好配合源碼閱讀，不然又些地方你會有點(diǎn)不明白。

問題？
往往在項目中會展現(xiàn)很高的頁面，為了考慮加載速度，我們會使用延遲加載，剛開始我只進(jìn)行圖片延遲加載，其后又發(fā)現(xiàn)不妥，因為一個頁面的加載并非只有圖片，這樣的話，我們可以需要為整個頁面分屏加載顯示。

整個思路如下：
考慮到分屏最簡單的就是把頁面截成單個的IFRAME，這里我們使用這種方式進(jìn)行解決此問題。

先給大家介紹兩個JS元素①
clientHeight
只讀屬性，聲明了窗口的文檔顯示區(qū)的高度和寬度，以像素計。
這里的寬度和高度不包括菜單欄、工具欄以及滾動條等的高度。

contentDocument
contentDocum ent 屬性以 HTML 對象返回框架容納的文檔。
可以通過所有標(biāo)準(zhǔn)的 DOM 方法來處理被返回的對象。
整個解決問題的過程，最棘手的是ifreame的自適應(yīng)高度的瀏覽器兼容問題。
說到兼容，瀏覽器之間的兼容性最常見的是JS元素不兼容，
例如：FF可用的元素IE不能用，IE能用的，偏偏FF不能用。

還有一種是在body等HTML標(biāo)簽的像素又些差異，
例如：iframe的高度都是100，在IE正好，在FF就顯然不足夠了。

既然兼容瀏覽器我也找不到什么好的辦法，最直觀而簡單的就是多套方案。

瀏覽器兼容中的HTML標(biāo)簽問題？ var frame= document.frames?document.frames.document:frame.contentDocument;
復(fù)制代碼這樣我們獲得了 document，值得慶幸的是他們都能兼容clientHeight元素。
這樣我們就可以使用通用的js元素獲取iframe的高度了。 frame.height = frame.body.clientHeight
復(fù)制代碼如何獲取到客戶端瀏覽器類型，并解決像素差異問題？ 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；

}
復(fù)制代碼在框架自適應(yīng)高度的時候，我碰到一個問題，就是IE統(tǒng)計不到ifreame的高度進(jìn)行自適應(yīng)，而FF可以，是不是IE加載iframe不能立即獲取高度，然后我嘗試在iframe onload事件觸發(fā)initHeight()，結(jié)果真的是IE的問題②。 <iframe class="iframe" id="frame3" onload="initHeight()" src="about:blank" width="100%" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
復(fù)制代碼部分源碼：

擴(kuò)展閱讀：
如果你想在這個基礎(chǔ)上擴(kuò)展下這個功能，可用利用滾動條事件。
例如：優(yōu)先加載當(dāng)前屏幕的數(shù)據(jù)（在用戶直接拖動滾動條到低端時候） function initEvents(){

$(window).bind('scroll', function() {

var margin_top = $(document).scrollTop(); // 滾動條上部距頂高度

}

}
復(fù)制代碼① javascript 的對象、屬性。
② 這個問題只是個人推斷，可信度不足，但有幾分嫌疑。

Thank of：
感謝凱哥、繼超同學(xué) 的引導(dǎo)和幫助。

作者：
郝世博@鄭州升博世紀(jì)
郵箱：winhunter@163.com

這里還有很多不足，望大家多多批評，批評的同時別忘了指出缺陷。