पूरे वेबपेज की ऊंचाई कैसे खोजें?

Question

मैं वेबसाइटों के स्क्रीन-शॉट्स को कैप्चर करने के समाधान पर काम कर रहा हूं। मैं काम पूरा करने के लिए slimerjs.org पर उल्लिखित डिफ़ॉल्ट उदाहरण का उपयोग कर रहा हूं।

इस टूल के साथ स्क्रीन-शॉट बहुत अच्छे हैं, लेकिन मुझे वेबसाइटों की पूर्ण ऊंचाई स्क्रीन-शॉट लेने की आवश्यकता है। http://www.yellowpages.com जैसी वेबसाइटों की स्क्रीन कैप्चर करते समय, मुझे किसी भी ऊंचाई पैरामीटर का उल्लेख किए बिना पूर्ण लंबाई स्क्रीन मिल सकती है।

लेकिन जब मैं इस यूआरएल की कोशिश:, मैं पूरी लंबाई छवियों नहीं मिल सकता है: http://votingbecause.usatoday.com/

मैं केवल सेट संकल्प (1920x1080 डिफ़ॉल्ट) के स्क्रीनशॉट मिलता है।

चूंकि मैं slimerjs का उपयोग कर रहा हूं, मैं jQuery का उपयोग कर डोम में हेरफेर कर सकता हूं। मैं पूरी वेबसाइट ऊंचाई को खोजने के लिए इतना है कि मुझे लगता है कि संकल्प

मैंने कोशिश की

• document.height()
• document.body.scrollheight के स्क्रीनशॉट ले सकते हैं की जरूरत है
• screen.height
• $ (दस्तावेज़) .height()
• (और कई अन्य जो मैंने पाया)

लेकिन इन सभी ने केवल व्यूपोर्ट की ऊंचाई (वेबसाइट देखने में)

प्रश्न है, वेबसाइट की पूरी स्क्रॉल करने योग्य ऊंचाई कैसे प्राप्त करें?

Answer 1

अधिक सामान्य हो सकता है और आप सिर्फ एक सरल प्रत्यावर्तन के साथ वर्तमान पृष्ठ पर उच्चतम डोम नोड मिल सकता है किसी भी पृष्ठ के ऊंचाई ढूंढने के लिए:

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

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

आनंद लें!

पीएस iframe सामग्री का समर्थन करता है।

Answer 2

$("body").height(); 

आपको क्या चाहिए

Answer 3

$(window).height(); 

पुनः प्राप्त वर्तमान विंडो ऊंचाई है ..

Answer 4

साइट में सामग्री निम्न div में

<div class="site-wrapper flex column"> 

इस कोड का उपयोग मिल रहे हैं यह ऊंचाई

document.querySelector(".site-wrapper").scrollHeight