How to check height of your web page?

Question

Say we have a form that loads in an iframe on another site. Now There is a new version of it and has to match the same height as the previous form in order to fit perfectly on the sites where it was loaded.

How can you check, even using JavaScript, how much the height of your web page is? then I can check for both and compare. Like the number of vertical pixels your page has.

Edit

Ignore the iframe, just looking for the height of current html document, that's it.

Check the height attribute of the iframe - that's the space you have to work with. — Moob, Oct 18 '13 at 11:16
Nope that isn't it. That's not the actual height of the content that's loaded inside — Hanky Panky, Oct 18 '13 at 11:17
could you please use a bit of naming in your question (parent page p1, iframe i1, etc) so that it is easy to understand the context of each sentence. Did you tried scrollHeight property https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight — gurvinder372, Oct 18 '13 at 11:17
If you are trying to get the parent page details from its child which is in a different domain it is not possible. Because for security reasons accessing information between cross domains is not allowed. — Kaf, Oct 18 '13 at 11:21

ediblecode · Answer 1 · 2013-10-18T11:42:05.340

Getting the height of the document can be done using these:

jQuery

$(document).height()

Javascript only (works cross browser)

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

For Max(documentHeight, browserHeight) use:

jQuery

Math.max($(document).height(), $(browser).height());

Javascript only (works cross browser)

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

This is correct, but he would like to know how to do it in javascript not jQuery :-) — Ben Carey, Oct 18 '13 at 11:27

Ben Carey · Answer 2 · 2013-10-18T11:26:35.287

1

It is quite unclear from your question what you are actually asking. But if you are trying to get the height of the parents document, then you need to use:

var parents_height = parent.document.body.clientHeight;

This will return the height of the parent windows document. However, it will only return it if the iframe/popup is on the same domain.

If you are only interested in the current documents height, then use:

var height = document.body.clientHeight;

However, if you have manipulated the height of the body tag in CSS, tehn you can run into issues. You might be better off using jQuery like so:

$(document).height();

edited Oct 18 '13 at 11:26

answered Oct 18 '13 at 11:19

Ben Carey

16,540
19
87
169

Ignore that there is any iframe. Just want to get height of current document – Hanky Panky Oct 18 '13 at 11:22
@Hanky웃Panky Amended :-). The code above will retrieve the height of the current document. – Ben Carey Oct 18 '13 at 11:25
@BenCarey Your Javascript won't work in older browsers – ediblecode Oct 18 '13 at 11:32
@jumpingcode By older browsers, are you referring to IE6? – Ben Carey Oct 18 '13 at 11:34

score 0 · Answer 3 · answered Oct 18 '13 at 11:17

0

try this

var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
    var _docWidth = (document.width !== undefined) ? document.width : document.body.offsetWidth;

answered Oct 18 '13 at 11:17

Vinay Pratap Singh Bhadauria

9,829
3
28
49

score 0 · Answer 4 · answered Oct 18 '13 at 11:18

0

how about scrollHeight property

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

answered Oct 18 '13 at 11:18

gurvinder372

66,980
10
72
94

R. Oosterholt · Answer 5 · 2013-10-18T11:35:41.150

-1

You can use jQueries height function:

$(document).height();

edited Oct 18 '13 at 11:35

answered Oct 18 '13 at 11:15

R. Oosterholt

7,720
2
53
77

-1. This isn't guaranteed to be correct, its dependent on their styling. It's better to use $(document).height(); – ediblecode Oct 18 '13 at 11:24

matewka · Answer 6 · 2013-10-18T11:30:38.277

-1

This simple line of javascript code will give you the answer

document.body.offsetHeight;

Remember you need to fetch it after the whole document is loaded

<script>
window.onload = function() {
    document.body.offsetHeight;
}
</script>

edited Oct 18 '13 at 11:30

answered Oct 18 '13 at 11:16

matewka

9,912
2
32
43

Because that will not tell you the total height of your website. Only the visible height. – putvande Oct 18 '13 at 11:20
@putvande, you're joking right? Didn't you mix it up with window.innerHeight? – matewka Oct 18 '13 at 11:20
Yes I tested it. When my browser is maximized it gives me a different number as when I make it smaller (in FireFox). – putvande Oct 18 '13 at 11:21
Well, calling `document.body.offsetHeight` in the console of this very webpage I get result of 3074. Isn't that the whole page? – matewka Oct 18 '13 at 11:23
It is.. but I don't get the same in FireFox. – putvande Oct 18 '13 at 11:23
Shows different in different browsers? – Hanky Panky Oct 18 '13 at 11:25
@putvande, I don't know what FF version you use, but for me everything works just great. – matewka Oct 18 '13 at 11:25
@matewka, to be fair it works perfect on this website, but for some strange reason it does not work on every website. Might be a FireFox (24) bug. – putvande Oct 18 '13 at 11:27
Well, I had completely NO idea that it doesn't work for someone. It always worked for me. Can you please un-down-vote me? – matewka Oct 18 '13 at 11:30
Just because it worked for you doesn't mean someone should remove their downvote. – ediblecode Oct 18 '13 at 11:34

How to check height of your web page?

6 Answers6

jQuery

Javascript only (works cross browser)

jQuery

Javascript only (works cross browser)