जावास्क्रिप्ट के साथ पूरे दस्तावेज़ की ऊंचाई कैसे प्राप्त करें?


333

कुछ दस्तावेज़ मैं दस्तावेज़ की ऊँचाई (बहुत नीचे बिल्कुल कुछ स्थिति के लिए) प्राप्त नहीं कर सकता। इसके अतिरिक्त, इन पृष्ठों पर कोई पेडिंग-बॉट कुछ नहीं करता है, लेकिन उन पृष्ठों पर करें जहाँ ऊँचाई वापस आ जाएगी। मामला:

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

Fandango
jQuery के $(document).height();रिटर्न पर सही मान
document.heightरिटर्न 0
document.body.scrollHeightरिटर्न

पेपरबैक स्वैप पर:
jQuery का $(document).height();TypeError: $(document)null
document.heightरिटर्न एक गलत मूल्य एक गलत मूल्य
document.body.scrollHeightदेता है

नोट: मेरे पास ब्राउज़र स्तर की अनुमति है, अगर वहाँ कुछ चाल है।


5
$ (दस्तावेज़) शून्य है क्योंकि उस साइट में jQuery लोड नहीं है ...
जेम्स

हम्म, मैं शपथ ले सकता था मैंने jQuery की पुष्टि करने के लिए कुछ और जाँच की थी, लेकिन ऐसा नहीं लगता है जैसे मैंने किया, हा! मुझे लगा कि फायरबग ने jQuery का पैक किया था ... हम्म, मुझे लगता है कि मैं इसे बाहर की जाँच करूँगा अगर यह एक समाधान है।
निक

4
फायरबग में जेकरी पैक नहीं है
harsimranb

ब्राउज़र विंडो का आकार ढूँढना देखें । इसमें विभिन्न ब्राउज़रों के व्यवहारों की शानदार तालिका है।
ओरोल

जवाबों:


670

दस्तावेज़ आकार एक ब्राउज़र संगतता दुःस्वप्न हैं, क्योंकि सभी ब्राउज़र क्लाइंटहाइट और स्क्रॉलहाइट गुणों को उजागर करते हैं, वे सभी इस बात से सहमत नहीं हैं कि मूल्यों की गणना कैसे की जाती है।

आप सही ऊँचाई / चौड़ाई का परीक्षण कैसे करते हैं, इसके लिए एक जटिल सर्वोत्तम अभ्यास सूत्र हुआ करता था। इसमें डॉक्यूमेंट / फ्रेंडलीमेंटमेंट प्रॉपर्टी का उपयोग करना शामिल है, यदि उपलब्ध है या डॉक्यूमेंट प्रॉपर्टी पर वापस गिर रहा है।

सही ऊँचाई प्राप्त करने का सबसे सरल तरीका यह है कि दस्तावेज़, या डॉक्यूमेंटईमेंट पर पाए गए सभी ऊँचाई के मान प्राप्त करें और उच्चतम का उपयोग करें। यह मूल रूप से jQuery क्या करता है:

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

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

फायरबग + jQuery बुकमार्कलेट के साथ एक त्वरित परीक्षण दोनों उद्धृत पृष्ठों के लिए सही ऊंचाई देता है, और इसलिए कोड उदाहरण देता है।

ध्यान दें कि दस्तावेज़ तैयार होने से पहले दस्तावेज़ की ऊँचाई का परीक्षण करने का परिणाम हमेशा 0. होगा। इसके अलावा, यदि आप अधिक सामान लोड करते हैं, या उपयोगकर्ता विंडो का आकार बदलता है, तो आपको फिर से परीक्षण करने की आवश्यकता हो सकती है। यदि आपको लोड समय पर इसकी आवश्यकता है, तो दस्तावेज़ का उपयोग करें onloadया दस्तावेज़ तैयार करें , अन्यथा जब भी आपको नंबर की आवश्यकता हो तो परीक्षण करें।


2
इस समाधान को रेट करें, क्योंकि यह तब काम करता है जब आप प्रोटोटाइप लाइब्रेरी का उपयोग कर रहे हैं, jQuery के साथ ऐसा कोई मुद्दा नहीं है
se_pavel

10
जब गणना की इस पद्धति के कारण, आइफ्रेम और jquery के साथ काम करते हैं, तो iframe के दस्तावेज़ की ऊंचाई, iframe ही की ऊंचाई कम से कम होगी। यह नोट करना महत्वपूर्ण है जब आप सामग्री से मेल खाने के लिए iframe की ऊंचाई कम करना चाहते हैं। आपको सबसे पहले iframe की ऊंचाई को रीसेट करना होगा।
डेविड लेव

3
मुझे iframe बढ़ने और इसे (facebook ऐप) सिकोड़ने की आवश्यकता थी और पाया कि document.body.offsetHeight मेरे लिए सबसे अच्छा विकल्प था, सबसे ब्राउज़रों द्वारा सटीक रूप से समर्थित।
जेएफजी

1
यह बहुत अच्छा है, हालांकि यदि दस्तावेज़ तैयार नहीं है, तो गलत परिणाम दे सकता है - यानी, जब सर्वर उत्पन्न कोड में उपयोग किया जाता है ...
stuartdotnet

1
तैयार होने से पहले दस्तावेज़ का परीक्षण करना काम नहीं करेगा। इससे उत्पन्न कोड / दस्तावेज़ों से कोई लेना-देना नहीं है, बल्कि दस्तावेज़ को कैसे लोड किया जाता है। दस्तावेज़ तैयार होने के बाद परीक्षण चलना चाहिए , और मैं इसे तभी चलाने का सुझाव दूंगा जब दस्तावेज़ पूरी तरह से लोड हो जाए क्योंकि शेष आइटम ऊंचाई को प्रभावित कर सकते हैं, ब्राउज़र का आकार भी बदल सकता है।
बोरगर

213

यह एक बहुत पुराना प्रश्न है, और इस प्रकार, कई पुराने उत्तर हैं। 2020 तक सभी प्रमुख ब्राउज़रों ने मानक का पालन किया है

2020 के लिए उत्तर:

document.body.scrollHeight

संपादित करें: ऊपर <body>टैग में मार्जिन को ध्यान में नहीं रखा गया है। यदि आपके शरीर में मार्जिन है, तो उपयोग करें:

document.documentElement.scrollHeight

एचएम - अब मैं इसका परीक्षण करता हूं और यह काम करता है - मुझे पता नहीं क्यों - इतना ठीक है :) - मैं अपनी पिछली टिप्पणी को हटा देता हूं
कामिल कीलवस्की

6
2017 तक इसे मेरे लिए सही उत्तर के रूप में चिह्नित किया जाना चाहिए।
जोआन

@ जोआन यह तय करने के लिए मूल पोस्टर पर है :)
Marquizzo

मार्जिन की उपस्थिति में काम नहीं करता है। document.documentElement.getBoundingClientRect()बेहतर काम करता है।
टोर्विन

3
इसके साथ एक त्रुटि है: उदाहरण के लिए कहें कि <h1>प्रारंभ में <body>डिफ़ॉल्ट मार्जिन के साथ एक तत्व है , यह <body>तत्व का पता लगाने के तरीके के बिना नीचे धक्का देगा । document.documentElement.scrollHeight(नहीं document.body,scrollHeight) चीजों को करने का सबसे सटीक तरीका है। यह बॉडी मार्जिन और सामान के मार्जिन दोनों के साथ काम करता है और इसे नीचे की ओर धकेलता है।
ईथन

29

आप इसका उपयोग भी कर सकते हैं:

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 );
}

या अधिक jQuery के तरीके से (जब से आपने कहा jQuery झूठ नहीं है) :)

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

24

पूर्ण दस्तावेज़ ऊंचाई गणना:

अधिक सामान्य होने के लिए और किसी भी दस्तावेज़ की ऊँचाई खोजने के लिए आप एक साधारण पुनरावृत्ति के साथ वर्तमान पृष्ठ पर उच्चतम डोम नोड पा सकते हैं:

;(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);
})();

आप इस स्क्रिप्ट को एक DevTools कंसोल पर चिपकाने के साथ अपने नमूना साइटों ( http://fandango.com/ या http://paperbackswap.com/ ) पर इसका परीक्षण कर सकते हैं ।

नोट: यह साथ काम कर रहा है Iframes

का आनंद लें!


2
इसने एकदम जादू की तरह काम किया! यहां कोई अन्य उत्तर पूर्ण ऊंचाई (स्क्रॉल करने योग्य क्षेत्र सहित) प्राप्त करने के लिए काम नहीं करता है, वे सभी केवल दृश्यमान क्षेत्र की ऊंचाई पर लौटते हैं।
मार्टिन क्रिस्टियनसन

वास्तव में असाधारण, यह कभी नहीं सोचा था। फैंटमज में काम करने वाला केवल मैं ही मानता हूं।
माइंडलेसंगर

6

दस्तावेज़ आकार निर्धारित करने की "jQuery विधि" - सब कुछ क्वेरी करें, उच्चतम मूल्य लें, और सबसे अच्छे के लिए आशा करें - ज्यादातर मामलों में काम करता है, लेकिन उन सभी में नहीं

यदि आपको वास्तव में दस्तावेज़ आकार के लिए बुलेट-प्रूफ परिणाम चाहिए, तो मेरा सुझाव है कि आप मेरे jQuery.documentSize प्लगइन का उपयोग करें । अन्य विधियों के विपरीत, यह वास्तव में परीक्षण और ब्राउज़र व्यवहार का मूल्यांकन करता है जब इसे लोड किया जाता है और, परिणाम के आधार पर, वहां से सही संपत्ति पर सवाल उठाता है।

प्रदर्शन पर इस एक बार के परीक्षण का प्रभाव कम से कम है , और प्लगइन भी अजीब परिदृश्यों में सही परिणाम देता है - इसलिए नहीं कि मैं ऐसा कहता हूं, लेकिन क्योंकि एक बड़े पैमाने पर, ऑटो-जनरेटेड टेस्ट सूट वास्तव में सत्यापित करता है कि यह करता है।

क्योंकि प्लगइन वेनिला जावास्क्रिप्ट में लिखा गया है, आप इसे jQuery के बिना भी उपयोग कर सकते हैं ।


5

मैंने झूठ बोला, jQuery ने दोनों पृष्ठों $ (दस्तावेज़) .height () के लिए सही मान लौटाया? ... मुझे कभी इस पर संदेह क्यों हुआ?


1
विभिन्न ब्राउज़रों भाई।
जहरीली

4

2017 के लिए उचित उत्तर है:

document.documentElement.getBoundingClientRect().height

document.body.scrollHeightइस पद्धति के विपरीत बॉडी मार्जिन के लिए खाते। यह भिन्नात्मक ऊंचाई मूल्य भी देता है, जो कुछ मामलों में उपयोगी हो सकता है


1
जब मैं इस पृष्ठ पर आपकी विधि आज़माता हूं तो ये परिणाम होते हैं: i.imgur.com/0psVkIk.png आपकी विधि कुछ ऐसी वापस आती है जो खिड़की की ऊँचाई की तरह दिखती है, जबकि document.body.scrollHeightसंपूर्ण स्क्रॉल योग्य ऊँचाई को सूचीबद्ध करता है, जो कि मूल प्रश्न है।
Marquizzo

2
@Marquizzo ऐसा इसलिए है क्योंकि इस पृष्ठ html { height: 100% }में css है। इसलिए एपीआई सही ढंग से वास्तविक गणना की ऊंचाई वापस करता है । इस शैली को हटाने की कोशिश करें और हाशिये को भी जोड़ दें bodyऔर आप देखेंगे कि उपयोग करने में क्या समस्या है document.body.scrollHeight
टॉरविन

इसके साथ एक त्रुटि है: उदाहरण के लिए कहें कि <h1>प्रारंभ में <body>डिफ़ॉल्ट मार्जिन के साथ एक तत्व है , यह <body>तत्व का पता लगाने के तरीके के बिना नीचे धक्का देगा । document.documentElement.scrollHeight(नहीं document.body,scrollHeight) चीजों को करने का सबसे सटीक तरीका है।
एथन

@Booligoosh यकीन नहीं है कि आप क्या मतलब है। documentElement.scrollHeightइस मामले में एक गलत मूल्य देता है। documentElement.getBoundingClientRect().heightसही देता है। इसे देखें: jsfiddle.net/fLpqjsxd
torvin

1
@torvin तथ्य यह है कि इच्छित परिणाम द्वारा वापस नहीं किया गया है getBoundingClientRect().height। यह दरकिनार हो जाता है, जबकि 3 (तीन) अन्य तरीकों को दरकिनार नहीं किया जाता है। जिसमें आप इसका जिक्र करते हैं, वह भी इसमें शामिल है। और आप इस पृष्ठ की html ऊंचाई से 100% निकालने और इसे हाशिये पर जोड़ने का सुझाव देकर ऐसा करने पर जोर देते हैं। क्या बात है ? बस स्वीकार करें कि getBoundingClientRect().heightबुलेट-प्रूफ भी नहीं है।
रोब वाया

2

क्रॉस ब्राउज़र / उपकरण के उपयोग में चौड़ाई प्राप्त करने के लिए:

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

    return actualWidth;
}

11
हम ऊंचाई के बारे में बात कर रहे हैं। चौड़ाई नहीं।
यश

0

किसी व्यक्ति को किसी पृष्ठ को मांग पर स्क्रॉल करने में समस्या हो रही है, सुविधा का पता लगाने के लिए, मैं इस हैक के साथ आया हूं ताकि यह पता लगाया जा सके कि एनिमेटेड स्क्रॉल में किस सुविधा का उपयोग करना है।

मुद्दा दोनों था document.body.scrollTopऔर document.documentElementहमेशा trueसभी ब्राउज़रों में वापस आ गया।

हालाँकि आप वास्तव में केवल एक या दूसरे के साथ एक दस्तावेज़ स्क्रॉल कर सकते हैं। d.body.scrollTopसफारी के लिए और w3schools केdocument.documentElement अनुसार अन्य लोगों के लिए (उदाहरण देखें)

element.scrollTop सभी ब्राउज़रों में काम करता है, दस्तावेज़ स्तर के लिए ऐसा नहीं है।

    // 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;
    }

-1

गणना ऊंचाई + स्क्रॉल के लिए ब्लो कोड का उपयोग करें

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

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

-1

नीचे दिया गया यह क्रॉस ब्राउज़र कोड शरीर और HTML तत्वों की सभी संभावित ऊंचाइयों का मूल्यांकन करता है और अधिकतम पाया गया रिटर्न देता है:

            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

एक कार्य उदाहरण:

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 />


कृपया डाउनवोटिंग के मामले में प्रेरणा का अन्वेषण करें ताकि मैं बिंदु को सही कर सकूं। बहुत बहुत धन्यवाद
willy winka

-4

मुझे अभी ऊंचाई तय करने के बारे में पता नहीं है, लेकिन आप इसका इस्तेमाल नीचे की तरफ कुछ डालने के लिए कर सकते हैं:

<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>

1
मेरा विश्वास करो, मैंने इस पर HTML और CSS संसाधनों को समाप्त कर दिया है। इसे स्पष्ट नहीं कर सकते हैं, लेकिन यदि आप उन साइटों पर यह प्रयास करते हैं तो आप मुद्दों को देखेंगे।
निक

-4

ठीक से संदर्भ जोड़ें

मेरे मामले में मैं ASCX पृष्ठ का उपयोग कर रहा था और aspx पृष्ठ जिसमें ascx नियंत्रण शामिल है, संदर्भों का ठीक से उपयोग नहीं कर रहा है। मैंने बस निम्नलिखित कोड चिपकाए और यह काम किया:

<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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.