JavaScript ile tüm belgenin yüksekliği nasıl elde edilir?

333

Bazı belgeler belgenin yüksekliğini elde edemiyorum (kesinlikle en altta bir şey yerleştirmek için). Buna ek olarak, bir dolgu alt kısmı bu sayfalarda hiçbir şey yapmıyor gibi görünüyor, ancak yüksekliğin geri döneceği sayfalarda. Konuyla ilgili vaka (lar):

http://fandango.com
http://paperbackswap.com

Fandango
jQuery en $(document).height();doğru değeri
document.heightdöndürür 0
document.body.scrollHeightdöndürür 0

Paperback Değiştiğinde:
jQuery's $(document).height();TypeError: $(document)is null
document.heightyanlış bir değer
document.body.scrollHeightdöndürür yanlış bir değer döndürür

Not: Orada bir hile varsa, tarayıcı düzeyinde izinlerim var.

javascript

— Nic
kaynak

5

$ (document) null çünkü bu sitede jQuery yüklü değil ...

— James

Hm, jQuery kayıtlı olduğunu doğrulamak için başka bir şey kontrol yemin ama ben yaptım gibi görünmüyor, HA! Firebug jQuery paketlenmiş olduğunu düşündüm ... hm, sanırım ben bir çözüm varsa o zaman bu kontrol edecek.

— Nic

4

firebug paketlenmiş jquery yok

— harsimranb 23:12

Bkz . Tarayıcı penceresinin boyutunu bulma . Farklı tarayıcıların davranışlarının harika bir tablosuna sahiptir.

— Oriol

670

Belge boyutları bir tarayıcı uyumluluğu kabusudur, çünkü tüm tarayıcılar clientHeight ve scrollHeight özelliklerini ortaya çıkarsa da, değerlerin nasıl hesaplandığını kabul etmezler.

Doğru yükseklik / genişlik için nasıl test ettiğinize dair karmaşık bir en iyi uygulama formülü vardı. Bu, varsa document.documentElement özelliklerinin kullanılmasını veya belge özelliklerine geri dönülmesini içerir.

Doğru yüksekliği elde etmenin en basit yolu, belge veya documentElement öğesinde bulunan tüm yükseklik değerlerini almak ve en yüksek olanı kullanmaktır. Temelde jQuery bunu yapar:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Firebug + jQuery yer işareti ile yapılan hızlı bir test, belirtilen her iki sayfa için de doğru yüksekliği döndürür ve kod örneği de buna benzer.

Belge hazır olmadan önce belgenin yüksekliğinin test edilmesinin her zaman 0 ile sonuçlanacağını unutmayın. Ayrıca, daha fazla öğe yüklerseniz veya kullanıcı pencereyi yeniden boyutlandırırsa, yeniden test etmeniz gerekebilir. Yükleme zamanında ihtiyacınız varsa onloadveya belgeye hazır bir olay kullanın , aksi takdirde numaraya ihtiyacınız olduğunda test edin.

— Borgar
kaynak

2

Bu çözümü derecelendirin, çünkü prototip kitaplığı kullanırken çalışır, jQuery ile böyle bir sorun yoktur

— se_pavel

10

İframe'ler ve jquery ile çalışırken, bu hesaplama yöntemi nedeniyle, iframe'in belge yüksekliği her zaman en azından iframe itselft'in yüksekliği olacaktır. Bu, iframe'in yüksekliğini içeriğe uyacak şekilde azaltmak istediğinizde not etmek önemlidir. Önce iframe'in yüksekliğini sıfırlamanız gerekir.

— David Lay

3

Iframe'i büyütmeye ve küçültmeye (facebook uygulaması) ihtiyacım vardı ve bu belge.body.offsetHeight benim için en iyi seçim oldu, çoğu tarayıcı tarafından doğru bir şekilde desteklendi.

— JeffG

1

Her ne kadar belge hazır değilse yanlış sonuçlar verebilir - yani, sunucu tarafından oluşturulan kod kullanıldığında ...

— stuartdotnet

1

Belgeyi hazır olmadan test etmek işe yaramaz. Bunun oluşturulan kod / belgelerle ilgisi yoktur, bunun yerine belgenin nasıl yüklendiği. Test , belge hazır olduktan sonra çalıştırılmalıdır ve yalnızca belge tamamen yüklendiğinde çalıştırılmasını öneririm, çünkü kalan öğeler yüksekliği etkileyebilir ve ayrıca tarayıcıyı yeniden boyutlandırabilir.

— Borgar

214

Bu gerçekten eski bir soru ve bu nedenle birçok eski cevabı var. 2020'den itibaren tüm büyük tarayıcılar standarda bağlı kalmıştır .

2020 için cevap:

document.body.scrollHeight

Düzenleme: Yukarıdaki <body>etiket üzerindeki marjları dikkate almaz . Vücudunuzda kenar boşlukları varsa, şunları kullanın:

document.documentElement.scrollHeight

— Marquizzo
kaynak

hm - şimdi test ediyorum ve işe yarıyor - neden bilmiyorum - çok ok :) - önceki

— yorumumu siliyorum

6

2017 itibariyle bu bana doğru cevap olarak işaretlenmelidir.

— Joan

@Joan Karar vermek için orijinal postere kalmış :)

— Marquizzo

Kenar boşlukları varlığında çalışmaz. document.documentElement.getBoundingClientRect()daha iyi çalışır.

— torvin

3

Bununla ilgili bir hata var: Örneğin, varsayılan kenar boşluğunun <h1>başlangıcında bir öğe <body>olduğunu, onu <body>algılamanın bir yolu olmadan öğeyi aşağı iteceğini varsayalım. document.documentElement.scrollHeight(değil document.body,scrollHeight) bir şey yapmanın en doğru yoludur. Bu, hem vücut kenar boşlukları hem de vücut içindeki şeylerin kenar boşluklarını aşağı doğru iterek çalışır.

— Ethan

29

Bunu bile kullanabilirsiniz:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

veya daha jQuery şekilde (dediğiniz gibi jQuery yalan söylemez) :)

Math.max($(document).height(), $(window).height())

— Mimo
kaynak

24

Tam Belge yüksekliği hesaplaması:

Daha genel olmak ve herhangi bir belgenin yüksekliğini bulmak için, geçerli sayfadaki basit bir özyineleme ile en yüksek DOM Düğümü'nü bulabilirsiniz:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

Bu komut dosyasını bir DevTools Konsoluna yapıştırarak örnek sitelerinizde ( http://fandango.com/ veya http://paperbackswap.com/ ) Test edebilirsiniz .

NOT: ile çalışıyor Iframes.

Zevk almak!

— Andrii Verbytskyi
kaynak

2

Bu bir cazibe gibi çalıştı! Burada başka hiçbir yanıt tam yüksekliği (kaydırılabilir alan dahil) elde etmek için işe yaramaz, hepsi sadece görünür alan yüksekliğini döndürür.

— Martin Kristiansson

Gerçekten olağanüstü, bunu hiç düşünmemiştim. Sanırım sadece bir hayalette çalışıyor.

— MindlessRanger

6

Belge boyutunu belirlemenin "jQuery yöntemi" - her şeyi sorgular, en yüksek değeri alır ve en iyisini umar - çoğu durumda işe yarar , fakat hepsinde değil .

Belge boyutu için gerçekten kurşun geçirmez sonuçlara ihtiyacınız varsa , jQuery.documentSize eklentimi kullanmanızı öneririm . Diğer yöntemlerden farklı olarak, aslında yüklendiğinde tarayıcı davranışını test eder ve değerlendirir ve sonuca göre, doğru özelliği oradan sorgular.

Bu bir kerelik testin performans üzerindeki etkisi minimumdur ve eklenti en garip senaryolarda bile doğru sonuçları döndürür - bunu söylediğim için değil, büyük, otomatik olarak oluşturulmuş bir test paketi aslında bunu doğrular.

Eklenti vanilya Javascript ile yazılmış olduğundan, jQuery olmadan da kullanabilirsiniz .

— hashchange
kaynak

5

Ben yalan söyledim, jQuery her iki sayfa için doğru değeri döndürür $ (document) .height (); ... neden hiç şüphelendim?

— Nic
kaynak

1

Farklı tarayıcılar kardeşim.

— jahrichie

4

2017 için doğru cevap:

document.documentElement.getBoundingClientRect().height

document.body.scrollHeightBu yöntemin aksine gövde marjlarını açıklar. Ayrıca, bazı durumlarda faydalı olabilecek kesirli yükseklik değeri verir

— torvin
kaynak

1

Bu sayfada yönteminizi denediğimde elde ettiğim sonuçlar: i.imgur.com/0psVkIk.png Yönteminiz document.body.scrollHeight, orijinal sorunun sorduğu kaydırılabilir tüm yüksekliği listelerken, pencere yüksekliğine benzeyen bir şey döndürür .

— Marquizzo

2

@Marquizzo nedeni bu sayfanın html { height: 100% }css olması. Yani API doğru döndürür gerçek hesaplanan yükseklik. Bu stili kaldırmayı ve ayrıca kenar boşlukları eklemeyi deneyin bodyve kullanımdaki sorunun ne olduğunu göreceksiniz document.body.scrollHeight.

— torvin

Bununla ilgili bir hata var: Örneğin, varsayılan kenar boşluğunun <h1>başlangıcında bir öğe <body>olduğunu, onu <body>algılamanın bir yolu olmadan öğeyi aşağı iteceğini varsayalım. document.documentElement.scrollHeight(değil document.body,scrollHeight) bir şey yapmanın en doğru yoludur.

— Ethan

@Booligoosh ne demek istediğinden emin değilim. documentElement.scrollHeightbu durumda yanlış bir değer verir. documentElement.getBoundingClientRect().heightdoğru olanı verir. Bunu kontrol et: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin Gerçek, amaçlanan sonucun döndürülmediği anlamına gelir getBoundingClientRect().height. Yan izlenirken, 3 (üç) diğer yöntem yan izlenmez. Daha düşük olarak bahsettiğinizi de dahil. Ve bunu, bu sayfanın html yüksekliğinden% 100 kaldırmayı ve sayfaya kenar boşlukları eklemeyi önererek ısrar ediyorsunuz. Amaç ne ? Sadece bunun getBoundingClientRect().heightda kurşun geçirmez olmadığını kabul edin .

— Rob Waa

2

Çapraz tarayıcı / cihazda genişliği elde etmek için şunu kullanın:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
kaynak

11

boydan bahsediyoruz. genişlik değil.

— Yash

0

Özellik algılamayı kullanarak isteğe bağlı bir sayfayı kaydırmada sorun yaşayan herkes için, animasyonlu bir kaydırmada hangi özelliğin kullanılacağını tespit etmek için bu hack ile geldim.

Sorun her ikisiydi document.body.scrollTopve document.documentElementher zaman truetüm tarayıcılarda geri döndü .

Ancak bir belgeyi yalnızca biri veya diğeri ile kaydırabilirsiniz. w3schools'a göre d.body.scrollTopSafari ve document.documentElementdiğerleri için (örneklere bakın)

element.scrollTop tüm tarayıcılarda çalışır, belge düzeyi için geçerli değildir.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

— YK
kaynak

-1

hesaplama yüksekliği + kaydırma için darbe kodu kullan

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

— ali bagheri
kaynak

-1

Aşağıdaki bu çapraz tarayıcı kodu, gövde ve html öğelerinin tüm olası yüksekliklerini değerlendirir ve bulunan maksimum değeri döndürür:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

Çalışan bir örnek:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();

body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}

<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />

Snippet'i genişlet

— Willy Wonka
kaynak

Konuyu düzeltebilmem için lütfen aşağı iniş durumunda motivasyonu açıklayınız. Çok teşekkürler

— willy wonka

-4

Şu anda yüksekliği belirlemeyi bilmiyorum, ancak bunu altına bir şey koymak için kullanabilirsiniz:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

— jedihawk
kaynak

1

Güven bana, bu konuda HTML ve CSS kaynaklarını tükettim. Bunu açıklayamıyorum, ancak bu sitelerde denerseniz sorunları göreceksiniz.

— Nic

-4

Referansları düzgün ekleyin

Benim durumumda bir ASCX sayfası kullanıyordum ve ascx denetimini içeren aspx sayfası referansları düzgün kullanmıyor. Ben sadece aşağıdaki kodu yapıştırdı ve çalıştı:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

— uydurma
kaynak