Bug整理——$(window).height()獲取到$(document).height()的問題


   想看解決方案不想看無聊乏味的bug解決過程的同學,請直接跳轉到頁面底部~


   今天在做項目的過程中遇到了一個BUG,項目中需要獲取到瀏覽器客戶區的高度以方便做一些適應性調整,代碼如下:

$(document).ready(function(){
var $content_height = $(window).height() - 30 - 53;
var $nav_box_content_height = $content_height - 31 - 7;
$("#nav_box_content").css("height",$nav_box_content_height);
$(".main-container").css("min-height",$content_height);
})

    然而在部署到服務器之后,出現了bug,本身應有的響應動作並沒有發生,也沒有產生任何報錯。原因是$(window).height()獲取到了一個定值,也不會隨着瀏覽器窗口大小的變化而變化,百思不得其解。然后就開始各種alert程序中的變量尋找錯誤點(別吐槽,我知道大神們都用console。。。  ),開始的時候因為思維混亂,並沒有在意這個定值的意義。一頓瞎試之后突然想到應該關注這個數字的意義,猜想會不會是獲取到了文檔高度。於是做出了嘗試,alert了$(document).height(),果然相同。這時又到了百思不得其解的時刻了。


。。。。。。

 

。。。。。。

  不知道大家看到上面的圖有沒有發現什么。對,問題在於HTML5的文檔聲明並沒有被瀏覽器解析到,在用了正確的html5文檔聲明后,bug果然消失了。貼出我的錯誤代碼:

。。。。。


改過之后的代碼是這樣的:


在瀏覽器中的解析:


會發現HTML5文檔聲明已經被瀏覽器解析到。、


查閱相關文檔發現,webkit內核的瀏覽器中,如果沒有正確的HTML5文檔聲明的話,便會出現$(window).height()獲取到的值永遠等於$(document).height()這樣的bug,深層原因不清楚,對Jquery源碼了解很深的人可以研究研究為啥會出現這個bug。  另外,親測了非webkit內核的瀏覽器不會出現這樣的bug。


補充一些相關知識:

       一、 HTML文檔聲明:Web世界中存在很多種類的文檔,只有告訴瀏覽器本文檔的文檔類型,瀏覽器才能正確的解析文檔進行顯示。HTML中的<!DOCTYPE>標簽就用來給瀏覽器提供信息,告訴瀏覽器本HTML文檔是用什么版本編寫的。

       二、HTML5文檔聲明:  目前常用的是

<!DOCTYPE html> 
<html>
!-- 文檔內容 -->
</html>

這個是一種簡略寫法,完整的寫法是這樣的

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 


這兩種寫法並沒有什么區別,現在相當多的產品也都使用的簡略寫法。


    三、瀏覽器客戶區高度與文檔高度: 瀏覽器客戶區高度是指瀏覽器可視區域的高度,而文檔高度是整個頁面的高度。寬度同理,獲取他們的方法是:

瀏覽器客戶區:
$(window).height()
$(window).width()
文檔區:
$(document).height()
$(document).width()




總結:   出現$(window).height()獲取不正常並等於$(document).height()是由於沒有正確的HTML5文檔聲明導致的,並且僅在webkit內核中會有此問題。



 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com