วิธีรับความสูงของเอกสารทั้งหมดด้วย JavaScript?

333

เอกสารบางอย่างฉันไม่สามารถรับความสูงของเอกสาร (เพื่อวางบางสิ่งบางอย่างที่ด้านล่างสุด) นอกจากนี้ padding-bottom on ดูเหมือนว่าจะไม่ทำอะไรเลยในหน้าเหล่านี้ แต่ทำบนหน้าเว็บที่ความสูงจะกลับมา กรณีในจุด:

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

ใน Fandango
jQuery's $(document).height();คืนค่าที่ถูกต้อง
document.heightส่งคืน 0
document.body.scrollHeightคืน 0

ในการสลับอ่อนปกอ่อน:
jQuery's $(document).height();TypeError: $(document)เป็นโมฆะ
document.heightส่งคืนค่าที่ไม่ถูกต้อง
document.body.scrollHeightส่งคืนค่าที่ไม่ถูกต้อง

หมายเหตุ: ฉันมีสิทธิ์ระดับเบราว์เซอร์หากมีเคล็ดลับอยู่ที่นั่น

javascript

— นิค
แหล่งที่มา

5

$ (เอกสาร) เป็นโมฆะเพราะเว็บไซต์ที่ไม่ได้ jQuery โหลด ...

— เจมส์

อืมข้าสาบานได้เลยว่าข้าได้ตรวจสอบอย่างอื่นเพื่อยืนยันว่า jQuery ได้ทำการลงทะเบียนแล้ว แต่มันไม่เหมือนกับที่ข้าเคยทำ HA! ฉันคิดว่า firebug มีแพ็คเกจ jQuery ... อืมฉันเดาว่าฉันจะลองดูมันถ้ามันเป็นทางออก

— Nic

4

firebug ไม่ได้บรรจุ

— jQuery

ดูการหาขนาดของหน้าต่างเบราว์เซอร์ มันมีตารางพฤติกรรมที่ยอดเยี่ยมของเบราว์เซอร์ที่แตกต่างกัน

— Oriol

670

ขนาดเอกสารเป็นฝันร้ายที่เข้ากันได้กับเบราว์เซอร์เพราะแม้ว่าเบราว์เซอร์ทั้งหมดจะเปิดเผยคุณสมบัติ clientHeight และ scrollHeight แต่พวกเขาก็ไม่เห็นด้วยกับวิธีการคำนวณค่าต่างๆ

เคยเป็นสูตรปฏิบัติที่ดีที่สุดที่ซับซ้อนรอบ ๆ สำหรับวิธีที่คุณทดสอบความสูง / ความกว้างที่ถูกต้อง สิ่งนี้เกี่ยวข้องกับการใช้คุณสมบัติ document.documentElement ถ้ามีหรือย้อนกลับไปที่คุณสมบัติเอกสารและอื่น ๆ

วิธีที่ง่ายที่สุดในการรับความสูงที่ถูกต้องคือการรับค่าความสูงทั้งหมดที่พบในเอกสารหรือ documentElement และใช้ค่าความสูงสูงสุด นี่คือสิ่งที่ jQuery ทำ:

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

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

การทดสอบอย่างรวดเร็วด้วย Firebug + jQuery bookmarkletจะส่งคืนความสูงที่ถูกต้องสำหรับทั้งหน้าที่อ้างถึงและตัวอย่างโค้ดก็เช่นกัน

โปรดทราบว่าการทดสอบความสูงของเอกสารก่อนที่เอกสารพร้อมจะส่งผลให้เป็น 0 เสมอนอกจากนี้หากคุณโหลดสิ่งเพิ่มเติมหรือผู้ใช้ปรับขนาดหน้าต่างคุณอาจต้องทดสอบอีกครั้ง ใช้onloadหรือเอกสารพร้อมเหตุการณ์หากคุณต้องการในเวลาโหลดมิฉะนั้นเพียงทดสอบเมื่อใดก็ตามที่คุณต้องการหมายเลข

— Borgar
แหล่งที่มา

2

ให้คะแนนโซลูชันนี้เนื่องจากใช้งานได้เมื่อคุณใช้ไลบรารีต้นแบบโดยที่ jQuery ไม่มีปัญหาดังกล่าว

— se_pavel

10

เมื่อทำงานกับ iframes และ jquery เนื่องจากวิธีการคำนวณนี้ความสูงของเอกสารของ iframe จะน้อยกว่าความสูงของ iframe อย่างน้อยที่สุด นี่เป็นสิ่งสำคัญที่ควรทราบเมื่อคุณต้องการลดความสูงของ iframe เพื่อให้ตรงกับเนื้อหา คุณต้องรีเซ็ตความสูงของ iframe ก่อน

— David Lay

3

ฉันมีความต้องการที่จะขยาย iframe และย่อขนาด (แอพ facebook) และพบว่า document.body.offsetHeight เป็นตัวเลือกที่ดีที่สุดสำหรับฉันซึ่งได้รับการสนับสนุนอย่างถูกต้องจากเบราว์เซอร์ส่วนใหญ่

— JeffG

1

นี้เป็นที่ดีแม้จะสามารถให้ผลลัพธ์ที่ไม่ถูกต้องถ้าเอกสารไม่พร้อม - คือเมื่อนำมาใช้ในรหัสเซิร์ฟเวอร์สร้าง ...

— stuartdotnet

1

การทดสอบเอกสารก่อนที่จะพร้อมจะไม่ทำงาน สิ่งนี้ไม่เกี่ยวกับรหัส / เอกสารที่สร้างขึ้น แต่จะโหลดเอกสารอย่างไร การทดสอบจะต้องดำเนินการหลังจากเอกสารพร้อมใช้งานและฉันขอแนะนำให้เรียกใช้เฉพาะเมื่อมีการโหลดเอกสารอย่างเต็มที่เนื่องจากรายการที่เหลืออาจส่งผลต่อความสูงรวมถึงการปรับขนาดเบราว์เซอร์

— Borgar

214

นี่เป็นคำถามที่เก่ามากและมีคำตอบที่ล้าสมัยมากมาย ในฐานะที่เป็น 2020 ทุกเบราว์เซอร์ที่สำคัญมีการปฏิบัติตามมาตรฐาน

คำตอบสำหรับปี 2020:

document.body.scrollHeight

แก้ไข: ข้างต้นไม่คำนึงถึงระยะขอบบน<body>แท็ก หากร่างกายของคุณมีระยะขอบให้ใช้:

document.documentElement.scrollHeight

— Marquizzo
แหล่งที่มา

อืม - ตอนนี้ฉันทดสอบและใช้งานได้ - ฉันไม่รู้ว่าทำไม - โอเค :) - ฉันลบความคิดเห็นก่อนหน้าของฉัน

— Kamil Kiełczewski

6

ณ ปี 2560 สิ่งนี้ควรทำเครื่องหมายว่าเป็นคำตอบที่ถูกต้องสำหรับฉัน

— Joan

@Joan นั่นขึ้นอยู่กับโปสเตอร์เดิมที่จะตัดสินใจ :)

— Marquizzo

ไม่ทำงานต่อหน้าระยะขอบ document.documentElement.getBoundingClientRect()ทำงานได้ดีขึ้น

— torvin

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

— Mimo
แหล่งที่มา

24

การคำนวณความสูงของเอกสารแบบเต็ม:

หากต้องการทั่วไปมากขึ้นและค้นหาความสูงของเอกสารใด ๆคุณสามารถค้นหา DOM โหนดสูงสุดบนหน้าปัจจุบันด้วยการเรียกซ้ำง่าย ๆ :

;(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://fandango.com/หรือhttp://paperbackswap.com/ ) โดยวางสคริปต์นี้ไปยังคอนโซล DevTools

หมายเหตุ: Iframesมันจะทำงานร่วมกับ

สนุก!

— Andrii Verbytskyi
แหล่งที่มา

2

สิ่งนี้ได้ผลเหมือนมนต์เสน่ห์! ไม่มีคำตอบอื่นที่นี่ทำงานเพื่อรับความสูงเต็ม (รวมถึงพื้นที่ที่เลื่อนได้) พวกเขาทั้งหมดกลับความสูงเท่านั้นของพื้นที่ที่มองเห็นได้

— Martin Kristiansson

ยอดเยี่ยมจริงๆไม่เคยคิดเรื่องนี้ มีเพียงคนเดียวที่ทำงานใน phantomjs ฉันคิดว่า

— MindlessRanger

6

"การ jQuery วิธี" ของการกำหนดเอกสารขนาด - ทุกอย่างแบบสอบถามใช้ค่าสูงสุดและความหวังที่ดีที่สุด - งานในกรณีส่วนใหญ่ แต่ไม่ได้อยู่ในทั้งหมดของพวกเขา

หากคุณจริงๆต้องการผลลัพธ์กระสุนขนาดเอกสารที่ผมขอแนะนำให้คุณใช้ของฉันjQuery.documentSizeปลั๊กอิน ซึ่งแตกต่างจากวิธีอื่น ๆ จริง ๆ แล้วมันทดสอบและประเมินลักษณะการทำงานของเบราว์เซอร์เมื่อโหลดและขึ้นอยู่กับผลลัพธ์แบบสอบถามแบบสอบถามคุณสมบัติที่เหมาะสมจากที่นั่นออก

ผลกระทบของการทดสอบแบบครั้งเดียวต่อประสิทธิภาพการทำงานนั้นน้อยมากและปลั๊กอินจะให้ผลลัพธ์ที่ถูกต้องแม้ในสถานการณ์ที่แปลกประหลาดที่สุด - ไม่ใช่เพราะฉันพูดอย่างนั้น

เพราะปลั๊กอินถูกเขียนในวานิลลา Javascript คุณสามารถใช้งานได้โดยไม่ต้อง jQueryเกินไป

— hashchange
แหล่งที่มา

5

ฉันโกหก jQuery ส่งกลับค่าที่ถูกต้องสำหรับทั้งสองหน้า $ (document) .height (); ... ทำไมฉันถึงสงสัยเลย

— นิค
แหล่งที่มา

1

เบราว์เซอร์ที่แตกต่างกัน

— jahrichie

4

คำตอบที่เหมาะสมสำหรับปี 2560 คือ:

document.documentElement.getBoundingClientRect().height

ซึ่งแตกต่างจากdocument.body.scrollHeightวิธีการนี้บัญชีสำหรับอัตรากำไรขั้นต้นของร่างกาย นอกจากนี้ยังให้ค่าความสูงบางส่วนซึ่งอาจมีประโยชน์ในบางกรณี

— torvin
แหล่งที่มา

1

นี่คือผลลัพธ์ที่ฉันได้รับเมื่อฉันลองใช้วิธีของคุณในหน้านี้: i.imgur.com/0psVkIk.pngวิธีการของคุณจะคืนค่าบางอย่างที่ดูเหมือนความสูงของหน้าต่างในขณะที่document.body.scrollHeightแสดงความสูงที่เลื่อนได้ทั้งหมดซึ่งเป็นสิ่งที่คำถามเดิมถาม

— Marquizzo

2

@Marquizzo นั่นเป็นเพราะหน้านี้มีhtml { height: 100% }css ดังนั้น API จะส่งกลับค่าความสูงที่คำนวณได้จริงอย่างถูกต้อง ลองเอารูปแบบนี้และยังเพิ่มอัตรากำไรขั้นต้นจะและคุณจะเห็นสิ่งที่เป็นปัญหากับการใช้body document.body.scrollHeight

— torvin

มีข้อผิดพลาดอย่างหนึ่งคือ: พูดเช่นว่ามี<h1>องค์ประกอบที่จุดเริ่มต้นของ<body>ส่วนต่างเริ่มต้นมันจะผลัก<body>องค์ประกอบลงโดยไม่ต้องตรวจสอบมัน document.documentElement.scrollHeight(ไม่ใช่document.body,scrollHeight) เป็นวิธีที่แม่นยำที่สุดในการทำสิ่งต่าง ๆ

— อีธาน

@Booligoosh ไม่แน่ใจว่าคุณหมายถึงอะไร documentElement.scrollHeightให้ค่าที่ไม่ถูกต้องในกรณีนี้ documentElement.getBoundingClientRect().heightให้สิ่งที่ถูกต้อง ตรวจสอบนี้: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin getBoundingClientRect().heightยังคงความจริงที่ว่าไม่ได้เป็นผลมาจากความตั้งใจที่ถูกส่งกลับโดย มันได้รับการเบี่ยงเบนออกไปในขณะที่ 3 (สาม) วิธีการอื่นนั้น รวมถึงสิ่งที่คุณพูดถึงว่าด้อยกว่า และคุณยืนยันในการทำเช่นนั้นโดยแนะนำให้ลบ 100% จากความสูง html ของหน้านี้และเพิ่มระยะขอบให้ ประเด็นคืออะไร ? เพียงยอมรับว่านั่นgetBoundingClientRect().heightไม่ใช่กระสุน

— Rob Waa

2

ในการรับความกว้างในการใช้งานข้ามเบราว์เซอร์ / อุปกรณ์:

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

    return actualWidth;
}

— user937284
แหล่งที่มา

11

เรากำลังพูดถึงความสูง ไม่กว้าง

— Yash

0

สำหรับทุกคนที่มีปัญหาในการเลื่อนหน้าเว็บตามต้องการโดยใช้การตรวจจับคุณสมบัติฉันได้ใช้แฮ็คนี้เพื่อตรวจสอบว่าคุณลักษณะใดที่จะใช้ในการเลื่อนภาพเคลื่อนไหว

ปัญหานี้เกิดขึ้นdocument.body.scrollTopและdocument.documentElementส่งคืนtrueในทุกเบราว์เซอร์เสมอ

อย่างไรก็ตามคุณสามารถเลื่อนเอกสารด้วยเอกสารอย่างใดอย่างหนึ่งเท่านั้น d.body.scrollTopสำหรับ Safari และdocument.documentElementสำหรับคนอื่น ๆ ทั้งหมดตามw3schools (ดูตัวอย่าง)

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

— YK
แหล่งที่มา

-1

ใช้รหัสเป่าเพื่อคำนวณความสูง + การเลื่อน

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

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

— อาลี bagheri
แหล่งที่มา

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

ขยายตัวอย่างข้อมูล

— วิลลี่วองก้า
แหล่งที่มา

โปรดอธิบายแรงจูงใจในกรณีที่มีการลงคะแนนเพื่อให้ฉันสามารถแก้ไขจุดได้ ขอบคุณมาก

— willka wonka

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

— jedihawk
แหล่งที่มา

1

เชื่อใจฉันฉันใช้ทรัพยากร HTML และ CSS หมดแล้ว ไม่สามารถอธิบายได้ แต่คุณจะเห็นปัญหาหากคุณลองทำในเว็บไซต์เหล่านั้น

— Nic

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

— ติดสาย
แหล่งที่มา