jQuery返回錯誤的文檔高度

我在Cocoa（Mac）中使用Webview，並試圖獲取文檔的正確高度。只是做正常的事情，webview.mainFrame.frameView.documentView.bounds.size.height似乎在所有情況下工作正常，除了我剛剛發現的一個：jQuery返回錯誤的文檔高度

http://www.medium.com。

當我在網站上嘗試這樣做時，當文檔高度更像2000+時，我得到的文檔高度類似於500，因爲我必須滾動幾個屏幕才能結束。

我試圖訴諸於web視圖評估javascript來獲得實際的高度，用喜歡這裏列出的方法：How to get height of entire document with JavaScript?

但是這也給了非常不正確的價值觀，像我最初的做法。即使進入該頁面，加載jQuery，然後執行諸如$（document.body）.height（）之類的東西也會給出非常不正確的值。任何人都知道發生了什麼事？有沒有其他方法可以獲得可靠的文檔高度？

我注意到檢查員在鉻中報告的高度也越來越混亂。在這些屏幕截圖中，您可以看到報告的document.body高度小於其子節點之一的高度。

medium.com body height in chrome inspector medium.com body->child div height in chrome inspector

來源

2014-01-15 Isak

這真是一個有趣的問題。 – TMS

我改變了標題 - 我認爲這是更合適的，應該吸引更多的關注。這實際上是一個錯誤，通過打開http://medium.com/並激活[jQuerify書籤]（http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/） – TMS

我認爲這是真正的bug，你應該將它報告給http://bugs.jquery.com/。 – TMS

與此頁的東西如下：

HTML以及主體（和一些底層元素的）都被設置爲100％的高度，所以它們完全適合瀏覽器窗口。在我的情況下，大約500像素高。他們如何建立這種滾動呢？那麼...有一個與溢出的div：汽車和實際內容是更多的方式（約4000px）

所以你實際上不滾動整個頁面，但這個特定的div（檢查佈局 - 前景滾動-region）

在這種情況下，它是完全正確的，因爲文件的高度爲500像素，你正在尋找的高度可以通過控制檯這種方式發現：

document.querySelectorAll(".scrolling-region")[0].scrollHeight

這會給你的4133px的高度，在這種情況下，是頁面的實際高度。

乾杯:)

來源

2014-01-23 21:52:36

我應該知道。謝謝！ – Isak

不要忘記標記爲正確的答案！ :) –

var D = document; 
     var docHeight = Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
    ); 

var height1= $(window).height(), 
    height= $(document).height();

希望這有助於。

來源

2014-01-15 08:04:06 gokul

我試過了，但在這種情況下會給出錯誤的答案。嘗試一下medium.com。 – Isak

我認爲你得到的是window.innerWidth/Height而不是整個文檔。

試試看。

document.body.offsetHeight

我在一個隨機的網頁上試了一下，得到了+8000像素，接縫合適。我的窗戶高度只有590（控制檯打開ofc）。

希望它有幫助。

莫爾

來源

2014-01-15 08:49:17 Molle

試過，但它不適用於我在談論的案例：www.medium.com。 – Isak

奇怪，這給了'window.innerHeight'的不同值， – italiansoda

貌似html,body{height:100%}和.screen-scroll,.screen-scroll>body{overflow:hidden}被搞亂的東西了你。如果您將它們都設置爲height:100%並將主體設置爲overflow:hidden，則html和body將具有相同的100%高度，而沒有overflow，這將使document高度與window高度相同。

所以它可能是，你實際上尋找header, nav, and .background-white高度的總和，而不是像你現在得到的500更像4222。

像這樣：

var hh = $('header').height(), 
    nh = $('nav').height(), 
    bh = $('.background-white').height(), 
    docHeight = hh+nh+bh; 
alert(docHeight);//test

來源

2014-01-20 21:01:52 FiLeVeR10

如何頁面加載前等待？ $（document）.ready（function（）{..}）;

我在Chrome中遇到同樣的問題。在一個網站上，需要用js調整兩列的高度。當我點擊F5時，其中一列有不同的高度，請用$（document）修復.ready

來源

2014-01-21 09:25:40 schrodingercat

這是在所有瀏覽器上發生，還是僅在Chrome上發生？

在1/15，chrome更新了瀏覽器，這改變了一些值得注意的事情，但其中一個與計算瀏覽器窗口/視口有關。這裏的帖子，或許它會幫助：http://blogs.telerik.com/jefffritz/posts/14-01-17/chrome-updated-scrollTop

來源

2014-01-21 21:38:17

我也面臨同樣的問題。經過一整天的努力，我意識到這一點，但如果我調用window.onload內的聲明，它會返回正確的高度。

來源

2016-03-18 12:07:22 Sahana

jQuery返回錯誤的文檔高度

回答

相關問題