How to get the Height of Web page from Web Browser control?

[vb_programmer]

Hello All!

In one of my current projects, I need to figure out the height of Web Page that's displayed inside WebBrowser control. I don't have any control on the URL that will feed the page; but what I'm required to do is: by some ways, I need to find the height for Web Browser control in such a way that User won't need to scroll the window and every thing will appear just there. I also require this for taking snap shot of the "full" web page without scroll bars.

I tried many different ways to achieve it but no luck! The ClientHeight and ClientWidth properties of HTMLDocument does not give me the height and width of Web Page; in fact it returns the Height and Width of the Web Browser control itself, which is not a desired result. With the help of Microsoft HTML Object Library, I also tried out the HTMLDocument.scrollBy method. This method perfectly scrolls the web page automatically but there is no feedback on whether it has reached the maximum or still to go. So, my code remains unsure if it has scrolled down completely or not.

I was thinking to manually scroll the Web Browser window in such a way that will return either some error with specific error number or zero or true/false when the scroll bar reaches the maximum. I tried SendMessage with the same anticipation and sent WM_VScroll to the Web Browser's hWnd by passing SB_Vert as wParam and 0& as lParam. However, this even didn't scroll Web Browser window! :-)

Can anybody please tell me how can I get the Height of HTML document inside Web Browser control? I know there must some way to do this as there are quite a few ActiveX controls that take "full" snap-shop of a Web Page fetched from a URL that's passed to it. So, I'm certain that I'm not looking for something very new and something that needs to be invented. It's there in market ... just the thing is that I don't know (nor I have any clue on) how to do it.

Any link, code snippet or anything that you feel can take me several steps forward then that will be a great help for me!

Waiting for your valuable reply ...

Regards,

Ruturaaj.

[jmsrickland]

Unless it is your own designed web page I don't see how on earth you can pre-determine the height of any given page (I mean the height of what it displays) since it all depends on the contents.

The height of the control is nothing more than what you make it to be.

You say you want to make the view window large enough to hold the entire height of the page but let's say that you knew the height of the page and it is higher than what your Form could possibly be. How would you even go about permforming such a task even knowing the height if it is already higher than your Form's greatest height possible?

Web page heights can be quite long as they get more and more complex with what they are displaying.

I don't know the answer to your question and I must admit I believe that it is quite impossible to assertain the view height beforehand unless you designed the page yourself and you know what it is going to display.

Also, every user would have to have exactly the same settings as far as font size, screen resolution, and other items that can vary in height depending on any given environment.

I would be quite amased and delighted if someone else popped in here with a solid solution for any given page, user machine, browser settings, etc.

[longwolf]

I don't think web pages have a fixed height.
Just changing the width of the browser will usually change the height of the page.

[jmsrickland]

....changing the width of the browser will usually change the height of the page

Yes, not to mention that; I didn't even think of that one.


EDIT:

He could however control the width by not allowing his WebBrowser to be resized but that wont prevent the other situations from altering the height.

[Merri]

http://www.quirksmode.org/dom/w3c_cssom.html

Try offsetHeight.

[jmsrickland]

It appears that some of those might be what OP is looking for and may help him indeed but how do you overcome the problem if the total height of the graphical view area is greater than what his or anyones's screen will allow?

[jmsrickland]

I tried that offsetHeight using WebBrowser.Navigate "http://vbforums.com/" and it only returns the height of the browser window; not the height of the document graphical area which turns out to be the same as this:

The ClientHeight and ClientWidth properties of HTMLDocument does not give me the height and width of Web Page; in fact it returns the Height and Width of the Web Browser control itself, which is not a desired result.

Also, I set my Form to the maximum height allowed and there is no way that the entire height of the document page can be viewed as a complete document without any vertical scrollbar.

I think you are seeking for something that cannot be done, IMO.

[longwolf]

Also, I set my Form to the maximum height allowed and there is no way that the entire height of the document page can be viewed as a complete document without any vertical scrollbar.

What if you placed a webbrowser control inside a picturebox?
Would that allow you to make the browser (and picbox) larger than the screen height?
Of course you'd still be guessing how tall to make them.
Maybe use a button to resize them in increments until the vertical bar disappears.

[longwolf]

vb_programmer,
Here's an idea, if you have one of those ActiveX controls that makes the snapshot, why not use it then get the pic height?

[Merri]

Just as a point of advice: you should not do it to HTMLDocument but you should do it to an element within the document: thus either html or body tag will do.

I haven't done much WebBrowser work so I can't write a code from the top of my head, but in pseudoish style: Debug.Print Browser.getElementsByTagName("body")(0).offsetHeight

[jmsrickland]

OK, I used that example on my own website.

I am not sure that you are going to get the actual height of the document page (well, maybe you can but it's really going to be difficult to do so and I don't know how to do it if it is possible). The results of that example gives different values depending on the height of the WebBrowser control.

I made a quick-n-dirty project to test with. Using my own webpage (since it will not change in contents from one time to another). I put two buttons on the Form for making the WebBrowser's height smaller or larger. I started out with a ramdom height and loaded my page. It had a vertical scrollbar so I knew that the actual height of the document was greater than the height of the WebBrower control. I increased the browser height one pixel at a time until the vertical scrollbar disapeared. I noted the value of the above sample statement and it turns out that it is the height of the control; not the height of the document page (although in this particular instance it is both). As I increased the height of the control the value got larger and as I decreased the height of the browser the value got smaller. In all cases the value was the height of the browser (includes the top and bottom borders).

So, I am not really sure how one can use this to actually get the document height and furthermore I am not sure there even is an actual height to a document page (unless you consider it's height to be at the exact point where the browser no longer displays the vertical scrollbar). But how are you going to automate this and again I will present the argument that it is not going to work for every document page since I tried it with vbforum's main page and I can tell you there is no way that the entire graphical contents can dispaly on any screen - it's just too long in it's height.

I don't seem to really understand what the OP is trying to acompolish anyway that would ever do him any good. Now, on the other hand, if the document page is custom made for his project then no problem as long as it is not greater in height than any one given PC/Screen on which it will display.

[Merri]

If you type this in Firefox's location bar...

javascript:alert(document.getElementsByTagName("html")[0].offsetHeight)

You get the full height of the page. body seems to give a bit smaller value, apparently thanks to margins. You can also use scrollHeight, or documentElement instead of that getElements mess.


I just like to test with Firefox because it is much faster to work with than opening VB6, finding and inserting the control and then writing pages to visit...


I'm pretty much ignoring the why question until vb_programmer gives us more information.

[jmsrickland]

Nope, it's the height of the browser's view area. I don't know about you and your end but that is what I am getting at my end. Using IE I get exactly the same values I got using WebBrowser. Since he is writing a VB program then he will probasbly need to use WebBrowser. So, what gives here?

[TheOldNewbie]

vb_programmer,

I don't know if this is kosher or not but you asked the same question at vbcity
and sp!ke gave you this answer,

"Take a look at thedocument.body.scrollTop and the document.documentElement.scrollTop properties - depending on the settings of the web page (standards compliant vs. quirks mode) one or the other should give you that information. They measure the the distance in pixels of the vertical scroll area of the document."

I don't know if it works or not,I just C/P it here.

[jmsrickland]

I get exactly the same results using document.body.scrollTop and document.documentElement.scrollTop as I did for all the others. Everytime I get a different value I measure the WebBrowser view area and it is the same value no matter what.

They measure the the distance in pixels of the vertical scroll area of the document

No it does not. It measures the distance the vertical scrollbar has to travel from the top of the browser view window to the bottom of the browser view window even if the document extend beyond the view area.

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.documentElement.offsetHeight

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.getElementsByTagName("body")(0).offsetHeight

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.getElementsByTagName("html")(0).offsetHeight

'
' Results is 0
'
WebBrowser1.Document.getElementsByTagName("title")(0).offsetHeight

'
' Results is 0
'
WebBrowser1.Document.getElementsByTagName("head")(0).offsetHeight

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.body.scrollTop

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.documentElement.scrollTop

'
' Results is the height of the WebBrowser view window + borders
'
WebBrowser1.Document.documentElement.scrollTop


At the percise point when the vertical scrollbars dissapear the view window is the same as the document height.

As the view window get shorter the vertical scrollbars appears and the values given are for the WebBrowser view area; not the document height.

As the view window gets higher there is no vertical scrollbar and the height of the document is made to be equal to the height of the WebBrowser view area because the browser just adds more onto the document page to equal the browser view area height.

Question:

Since I am saying that the values given are for the browser view area and everyone else is saying they are for the document then what am I doing wrong?

[vb_programmer]

Hello All,

Thanks so much for your valuable reply to my query. Please forgive me for not being able to reply earlier.

The offsetHeight (as you already have figured out) does not work as desired. However, scrollHeight did the trick for me!

iNewH = WB.Document.body.scrollHeight
iNewW = WB.Document.body.scrollWidth

Both these values are in Pixels; so with the help of ScaleX and ScaleY we will either need to convert it into Twips or set the Form' scale mode to Pixels. I did the conversion. Now, here is the problem ...

IE6 (and even 7) does not return this scrollHeight and scrollWidth correctly. Even after resizing the WB control to this new Height and Width, the scrollbars still remain. So, I do the manipulations here. On same website that Merri has given me, I found a simple formula to see whether the "scrollable" scrollbars are gone or not.

When the scrollbars are gone (I mean, we don't need to scroll page at all to see the content), (scrollWidth/Height) should be equal to (clientWidth/Height). So I run a DO WHILE on this condition and go on increasing the Height of WB by 1. I keep track of this "correction value". Actually this correction is not too much and by incrementing the iteration variable just to see how many times application repeated the Do While, I found that usually the desired condition is obtained in just 20 to 30 iterations depending how large you've already set the Height and Width of WB.

Once I get this correction value, I blindly add it to Width (to avoid another DO WHILE) plus an arbitrary number 100. I've tested this trick with many websites including the small page size websites such as Google or some large Page size websites such as Yahoo or Download.com ... this trick works!

So, now with these two methods, I'm able to set the Height and Width of Web Browser control equal to the Height and Width of page! However, I'm still not able to do one thing ... I'm not able to take the snap shot of this Web Browser control. Although this is not my primary requirement at the moment as I wanted to calculate the Height and Width of Page to dynamically resize my Popup Window, but this is certainly on task sheet.

As I mentioned before, this requirement is certainly not something that we really need to invent something very new ... it's already there; but just the thing that I'm not able to do it. As you already might have recognized that my approach is to resize WB to the Height and Width of Page and then take the screenshot of WB by using it's handle. However, if you feel I'm walking on a wrong path here then I've another alternative ...

1. set the WB height/width to a small size
2. then use scrollBy method of Body to scroll it down, take screenshot
3. scroll down, take screen shot and join picture it with the earlier one
4. Repeat step 3 until the above mentioned condition is not satisfied.
5. Save the resulting image to file.

The problem I faced is in step 3 ... joining images. I can Paint image at a certain X and Y using BitBlt and using two pic boxes .. one will hold the final image and one will hold these intermediate small images. May be because I've not implemented it correctly or may be the algorithm itself has logical error, the first two attempts of this alternative method failed. So, I switched to "resize entire control" method.

I need your help to move ahead and take screen shot of Web Page ...

Waiting for your reply ...

Regards,

Ruturaaj.

[jmsrickland]

I've tested this trick with many websites including the small page size websites such as Google or some large Page size websites such as Yahoo or Download.com ... this trick works!

One question, please.

Please excuse my ignorance as I just don't seem to quite understan your acompolishment. I see it that what you have done is to be able to "see" the entire height of a document page, from the very top to the very bottom, all at once on a screen. In otherwords, you can see the entire heigth of, let's say, vbforums.com home page as a single view document without any vertical scrollbar, is this correct?

So, exactly how did you overcome the situation when a document height exceeds the physical and logical height of your screen. I just don't get it. I used vbforums as a test and it turned out that the document height was far greater than my monitor could possible hold. So how did you do it? Are you actually saying that you can see the entire document page on your screen without any part of it lost beyond the upper and lowers edges of the screen. You can see a 5,299 pixel high (that is the height of vbforums) page on your monitor.

[Merri]

I found some information, but I can't test the code myself. I already have IE8 beta 2 running on my computer and they've broken their own ActiveX control. MozillaControl kind of works, but it does not support everything (and it is pretty messy control anyway). So, here is just code on how I assume it should be written in VB6:

Private Sub Command1_Click()
    Dim objVO As Object, lngRECT(3) As Long
    Const DVASPECT_CONTENT = 1
    WebBrowser.Document.QueryInterface IViewObject, objVO
    If Not objVO Is Nothing Then
        With WebBrowser.Document.getElementsByTagName("html")(0)
            lngRECT(2) = .scrollWidth
            lngRECT(3) = .scrollHeight
        End With
        objVO.Draw DVASPECT_CONTENT, 1, 0, 0, 0, Me.hDC, VarPtr(lngRECT(0)), 0, 0, 0
    End If
End Sub

Edit!
I also found this: http://www.spotlight.de/zforen/mvb/m...233-24625.html - but couldn't test it, of course.


Edit #2
jmsrickland, could you use [quote=""]...[/quote] instead? Using bold confuses who is saying what.

[jmsrickland]

Using www.vbforums.com as an example I was able to load the entire document page into the WebBrowser control and get a "snapshot" of it. It's not really a true Print Screen, as that would be impossible, but take a look at the image and let me know if this is what you want to do.

http://www.codeavenue.com/vbforums_graphical_height.jpg

[longwolf]

Using www.vbforums.com as an example I was able to load the entire document page into the WebBrowser control and get a "snapshot" of it. It's not really a true Print Screen, as that would be impossible, but take a look at the image and let me know if this is what you want to do.

http://www.codeavenue.com/vbforums_graphical_height.jpg

Coool!
How'd you get the snapshot?

[vb_programmer]

Using www.vbforums.com as an example I was able to load the entire document page into the WebBrowser control and get a "snapshot" of it. It's not really a true Print Screen, as that would be impossible, but take a look at the image and let me know if this is what you want to do.

http://www.codeavenue.com/vbforums_graphical_height.jpg

Hey ... YES, YES ... the snapshot is the thing that I'm looking for. Can you please share your code with me? ([email protected]) or directly here in this discussion area?

Regarding the other thing related to fitting it inside the screen then I'm not very much concern about it since what ultimately I want to do is take a snap shot of it. Certainly it's not a plain PrintScreen and there must be something else!

Eagerly waiting for your reply ...

Regards,

Ruturaaj.

[Merri]

He didn't mention it, but maybe he used code or information that I provided in my last post? I'm in a bit bad position being unable to test it myself. Maybe I reinstall my laptop with XP so I can test with the good old plain IE6...

[Edgemeal]

He didn't mention it, but maybe he used code or information that I provided in my last post? I'm in a bit bad position being unable to test it myself. Maybe I reinstall my laptop with XP so I can test with the good old plain IE6...

From link you posted and a little research I slapped this together, seems to work fairly well.

    Dim ret As Long
    
    WebBrowser1.Width = 1024 ' set web page width
    WebBusy = True ' get web page
    WebBrowser1.Navigate "http://www.vbforums.com/"
    Do Until WebBusy = False ' wait till doc_complete
        DoEvents
    Loop
    ' set up size
    LTRB(0) = 0 'Left
    LTRB(1) = 0 ' Top
    LTRB(2) = WebBrowser1.Width
    LTRB(3) = WebBrowser1.Document.Body.ScrollHeight ' height
    Picture1.Move 0, 0, LTRB(2), LTRB(3)
    WebBrowser1.Document.body.setAttribute "scroll", "no" ' hide scroll bars
    WebBrowser1.Visible = False
    ret = OleDraw(WebBrowser1.Object, DVASPECT_CONTENT, Picture1.hDC, LTRB(0))
    Picture1.Refresh
    'If ret = 0 Then SavePicture Picture1.Image, "c:\webpage.bmp"

Waiting to see jmsrickland code

[jmsrickland]

From link you posted and a little research I slapped this together, seems to work fairly well.

    Dim ret As Long
    
    WebBrowser1.Width = 1024 ' set web page width
    WebBusy = True ' get web page
    WebBrowser1.Navigate "http://www.vbforums.com/"
    Do Until WebBusy = False ' wait till doc_complete
        DoEvents
    Loop
    ' set up size
    LTRB(0) = 0 'Left
    LTRB(1) = 0 ' Top
    LTRB(2) = WebBrowser1.Width
    LTRB(3) = WebBrowser1.Document.Body.ScrollHeight ' height
    Picture1.Move 0, 0, LTRB(2), LTRB(3)
    WebBrowser1.Document.body.setAttribute "scroll", "no" ' hide scroll bars
    WebBrowser1.Visible = False
    ret = OleDraw(WebBrowser1.Object, DVASPECT_CONTENT, Picture1.hDC, LTRB(0))
    Picture1.Refresh
    'If ret = 0 Then SavePicture Picture1.Image, "c:\webpage.bmp"

Waiting to see jmsrickland code

No need to. What I did was basically the same as what you did except I didn't know about that hide scrollbar thingy so I wound up copying the picture in Picture1 to Picture2 and made Picture2's width 15 less than Picture1's width and saved Picture2.Image.

[jmsrickland]

OK, I went back to my project and added that hide scrollbar thingy like you did and removed the picture2. It didn't work. The scrollbar was still there so I changed it back to my original code by using the picture2 method and it works just like that picture I posted previously.

[vb_programmer]

OK, I went back to my project and added that hide scrollbar thingy like you did and removed the picture2. It didn't work. The scrollbar was still there so I changed it back to my original code by using the picture2 method and it works just like that picture I posted previously.

See this link which demonstrates taking snap of Web page.
http://www.vb-helper.com/howto_captu...age_image.html

However, our solution is better since we have a method to resize browser to the size of web page. But code on this link demonstrates skipping the Scrollbars. I feel getting the width of scroll bar from System Matrix related API is better and more generalized solution.

jmsrickland, try this method in your code instead of a substitution of a direct fix number 15.

-- Ruturaaj.

[vb_programmer]

jmsrickland, can you please share your code here?

[jmsrickland]

See this link which demonstrates taking snap of Web page.
....But code on this link demonstrates skipping the Scrollbars. I feel getting the width of scroll bar from System Matrix related API is better and more generalized solution.

I don't see in the code where it uses SystemMatrix to get the width of the scrollbar.

[Merri]

I made a WebShot user control.


(Yeah, I installed that XP over Vista.)

[Edgemeal]

I made a WebShot user control.
(Yeah, I installed that XP over Vista.)

Hmmm, Your UC code returns a different looking page then my latest code does.
Using this URL to test, http://www.theinquirer.net/default.aspx. Yours on left, mine on right.

[Merri]

It probably has something to do with the CSS changes that I apply to the page to remove borders and scrollbars (yes, on the freshly installed XP with IE6 the WebBrowser control would include borders in the webshot!) - the code you had for removing scrollbars didn't work for me.


Edit!
No, it is the advertisement that probably does that! In the left shot there is too wide of an ad that it won't fit the space -> IE drops the floated block down.

[Edgemeal]

It probably has something to do with the CSS changes that I apply to the page to remove borders and scrollbars (yes, on the freshly installed XP with IE6 the WebBrowser control would include borders in the webshot!) - the code you had for removing scrollbars didn't work for me.

UPDATED
v2.0
Lets you pre-set the width of the web page capture. (1024 minimum)
Lets you save the page as BMP, PNG, Or JPG with Quality option
Save image in full size or 3 smaller sizes.
Fixed issue where very bottom of page was cut off.
No picture boxes used.

UPDATED
v2.01
Minor change , remove some unused code.

[vb_programmer]

I got rid of the no scrollbar code, didn't work but on a couple local html pages i created.

I'm using GetSystemMetric to get get the Vscrollbar size and 2 pic boxes like jm was talking about.

Thanks for sharing your code. While testing, I noticed that if the URL is in Cache then Browser control fetches it from there and I get Object variable error on body.scrollHeight. I'm not sure if these two things have a connection with each other; but when I clear cache and try again, it works. So, just before the Navigate method call, I added "DeleteUrlCacheEntry" API call. Certainly using it the way I'm using it is not the fool-proof method and we still need to check all those HTTP etc. One may also think of writing a function to iterate all URLs in cache and then pattern match each entry with our URL to see if that's already in Cache. However, I think it will be just too much of work for a too small thing. Simply check and add if necessary HTTP in the beginning and call API once with URL as is and once with "/" added in the end. That's it! These are the only two variations that may exist in Cache.

If somebody else has faced the same error on scrollHeight then please let me know. We may come up with some more stable solution then!

Regards,

Ruturaaj.

[vb_programmer]

I made a WebShot user control.


(Yeah, I installed that XP over Vista.)

I just added another event to it "StatusChanged" which is a direct mapping of Web Browser control's StatusTextChange event. I will look into it more and will let you know if I make any further changes! But thanks so much for sharing your work with me! Edgemeal's code gives a very correct snap; but don't know why ... I get error on scrollHeight code line.

-- Ruturaaj.

[Edgemeal]

Thanks for sharing your code. While testing, I noticed that if the URL is in Cache then Browser control fetches it from there and I get Object variable error on body.scrollHeight.

Thanks for the feedback, so far I haven't gotten any errors like that, seems I'm getting updated pages too, if I keep capturing the same URL it takes about the same amount of time and the ads in them have changed. I even went to the URL in IE6 first then used the snapshot and still no errors here.

[Edgemeal]

Edgemeal's code gives a very correct snap; but don't know why ... I get error on scrollHeight code line.

-- Ruturaaj.

Ya works pretty good, the very bottom of the page seems to be getting clipped of tho, and there is a limit on how tall the capture can be, I forget now but theres some memory limit or something, why I can't size a picture box taller then 16383 pixels I guess.

[jmsrickland]

...the very bottom of the page seems to be getting clipped of tho....

You need to increase the height of LTRB(3) by the amount that is being cropped off.

LTRB(3) = WebBrowser1.Document.body.ScrollHeight + nn

where nn is the required amount

I might be wrong but I think nn is the value of the scroll-up and scroll-down buttons which is approx 25 to 30 pixels.

[Edgemeal]

You need to increase the height of LTRB(3) by the amount that is being cropped off.

LTRB(3) = WebBrowser1.Document.body.ScrollHeight + nn

where nn is the required amount

I might be wrong but I think nn is the value of the scroll-up and scroll-down buttons which is approx 25 to 30 pixels.

Yes I already tried that, the thing is it doesn't happen on all pages, its not very much at all, like on this forum it only cuts off part of the copyright at the bottom, other pages are perfect to the pixel.

btw you use GetSystemMetrics to get the size of scrollbars, etc, cause you can't guess how the user has their windows setup, hard coding aproxx values is never a good idea, but you already knew that.

[jmsrickland]

btw you use GetSystemMetrics to get the size of scrollbars, etc, cause you can't guess how the user has their windows setup, hard coding aproxx values is never a good idea, but you already knew that.

Yes. I only posted the pixel amount. Often when I do q-n-d's I hard code values just to get a quicky thing going just to see if it works then I go back and do it right (very impatientant at times).

OK, so it isn't the buttons heights; ummmm. Well then I guess the

WebBrowser1.Document.Body.ScrollHeight

doesn't always yield correct heights. Any idea what does?

[vb_programmer]

OK, so it isn't the buttons heights; ummmm. Well then I guess the

WebBrowser1.Document.Body.ScrollHeight

doesn't always yield correct heights. Any idea what does?

If you look at following link then you will recognize as the wrong values returned by IE for scrollHeigh and scrollWidth is a known bug.

http://www.quirksmode.org/dom/w3c_cs...ml#elementview

Author of that page has mentioned that IE 8 beta has corrected it. On the other hand, Mozilla Firefox returns correct values. There is a Mozilla Active-X control available that we may replace our current IE control with. I will try this tonight to see if it's a direct replacement or need further coding work to be done. We at first step, need this Mozilla control to allow access to DOM.

-- Ruturaaj.