Detecting WebView Height via Scrolling in XAML

Question

I really need to be able to work out how tall a piece of HTML is inside a given WebView. It's pretty much crucial to the project I'm trying to build. I know it's not immediately possible but I could determine whether a scrollbar existed on a WebView I might be able to increase the height of the view until it disappeared.

Any thoughts on this? Or any alternative solutions / suggestions? I looked into converting it for a TextBlock using the HTMLAgilityPack (now ported to Metro) but the HTML is too complex for that.

Do you happen to know how large your html will be ahead of time? — N_A, Oct 04 '12 at 14:04
If you know how large it is why not just give it a fixed size? — N_A, Oct 05 '12 at 13:37
I know how large the HTML will be in terms of file size, number of lines etc. As in, I know the content of the HTML before I bind it to the WebView. I do not have a function for calculating the height of that HTML when rendered. If I did that I'd essentially be writing a full HTML rendering engine just to get a height property! — roryok, Oct 05 '12 at 14:01
Can't you execute some JavaScript against the DOM to get the body height when the document is loaded? — Kieren Johnstone, Oct 08 '12 at 09:04
I mean to get info about the HTML, you need to access the DOM. That's done with Javascript within the HTML, see my answer below — Kieren Johnstone, Oct 08 '12 at 09:11

score 8 · Accepted Answer · answered Oct 08 '12 at 09:06

8

If you have control over the HTML, add this javascript:

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

(from http://james.padolsey.com/javascript/get-document-height-cross-browser/)

And call this rather than alert:

window.external.notify(getDocHeight());

Then implement the ScriptNotify event:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.scriptnotify.aspx

answered Oct 08 '12 at 09:06

Kieren Johnstone

41,277
16
94
144

Ah, so I could insert javascript into the HTML and then fire an event. Didn't think of that. I'll try it and get back to you – roryok Oct 08 '12 at 09:10
That's the answer. Excellent work! I can now calculate and set the height of the Webview. The height is coming out wrong for certain very simple documents but that's a javascript issue. Thanks! – roryok Oct 08 '12 at 10:54
@roryok I'm running into the same issue. The height is to great for some simple html but correct for others. – David Schmidlin Dec 24 '15 at 20:20

score 0 · Answer 2 · answered May 31 '16 at 19:25

This may be a good solution but there is still a problem with device pixel density. If you run your code on WP the conversion may look like this:

private double PixelsToLogicalPixels(double pixels)
{
     var info=Windows.Graphics.Display.DisplayInformation.GetForCurrentView();
     return pixels / info.RawPixelsPerViewPixel;
}
private double LogicalPixelsToPixels(double pixels)
{
     var info = Windows.Graphics.Display.DisplayInformation.GetForCurrentView();
     return pixels * info.RawPixelsPerViewPixel;
}

*This* may be a good solution? Is this a comment to an other answer? Then make it a comment, not an answer please. — Jan Doggen, May 31 '16 at 19:43

Detecting WebView Height via Scrolling in XAML

2 Answers2

Linked