I am currently working on Windows 10 UWP App and facing an issue with WebView that when I have less HTML content, I am getting more height in javascript. My Code is as follows
WebView webView = new WebView() { IsHitTestVisible = true };
string notifyJS = @"<script type='text/javascript' language='javascript'>
function setupBrowser(){
document.touchmove=function(){return false;};;
document.onmousemove=function(){return false;};
document.onselectstart=function(){return false;};
document.ondragstart=function(){return false;}
window.external.notify('ContentHeight:'+document.body.firstChild.offsetHeight);
//window.external.notify('ContentHeight:'+document.getElementById('pageWrapper').offsetHeight);
var links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++) {
links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
}
</script>";
string htmlContent;
if (hexcolor != null)
{
htmlContent = string.Format("<html><head>{0}</head>" +
"<body onLoad=\"setupBrowser()\" style=\"margin:0px;padding:0px;background-color:{2};\">" +
"<div id=\"pageWrapper\" style=\"width:100%;word-wrap:break-word;padding:0px 25px 0px 25px\">{1}</div></body></html>",
notifyJS,
formItem.I_DEFAULT_VALUE,
hexcolor);
}
Here formItem.I_DEFAULT_VALUE is
HTML without html,head and body tags and its value is
<p>
<span style="font-size: 14px;">To help us investigate your query please can you make a sheet using the following </span><a href=".pdf" style="font-size: 14px;" target="_blank">document</a><span style="font-size: 14px;">.</span></p>
<p>
<strong><span style="font-size: 14px;">Testing WebView Height</span></strong></p>
HexColor is background color that needs to be applied.
And my script_notify method is as follows:
webView.ScriptNotify += async (sender, e) =>
{
if (e.Value.StartsWith("ContentHeight"))
{
(sender as WebView).Height = Convert.ToDouble(e.Value.Split(':')[1]);
return;
}
if (!string.IsNullOrEmpty(e.Value))
{
string href = e.Value.ToLower();
if (href.StartsWith("mailto:"))
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
else if (href.StartsWith("tel:"))
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
else
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
}
};
Can someone suggest why I am getting very large height even if content is small?
I am currently working on Windows 10 UWP App and facing an issue with WebView that when I have less HTML content, I am getting more height in javascript. My Code is as follows
WebView webView = new WebView() { IsHitTestVisible = true };
string notifyJS = @"<script type='text/javascript' language='javascript'>
function setupBrowser(){
document.touchmove=function(){return false;};;
document.onmousemove=function(){return false;};
document.onselectstart=function(){return false;};
document.ondragstart=function(){return false;}
window.external.notify('ContentHeight:'+document.body.firstChild.offsetHeight);
//window.external.notify('ContentHeight:'+document.getElementById('pageWrapper').offsetHeight);
var links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++) {
links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
}
</script>";
string htmlContent;
if (hexcolor != null)
{
htmlContent = string.Format("<html><head>{0}</head>" +
"<body onLoad=\"setupBrowser()\" style=\"margin:0px;padding:0px;background-color:{2};\">" +
"<div id=\"pageWrapper\" style=\"width:100%;word-wrap:break-word;padding:0px 25px 0px 25px\">{1}</div></body></html>",
notifyJS,
formItem.I_DEFAULT_VALUE,
hexcolor);
}
Here formItem.I_DEFAULT_VALUE is
HTML without html,head and body tags and its value is
<p>
<span style="font-size: 14px;">To help us investigate your query please can you make a sheet using the following </span><a href="http://www.pdf995./samples/pdf.pdf" style="font-size: 14px;" target="_blank">document</a><span style="font-size: 14px;">.</span></p>
<p>
<strong><span style="font-size: 14px;">Testing WebView Height</span></strong></p>
HexColor is background color that needs to be applied.
And my script_notify method is as follows:
webView.ScriptNotify += async (sender, e) =>
{
if (e.Value.StartsWith("ContentHeight"))
{
(sender as WebView).Height = Convert.ToDouble(e.Value.Split(':')[1]);
return;
}
if (!string.IsNullOrEmpty(e.Value))
{
string href = e.Value.ToLower();
if (href.StartsWith("mailto:"))
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
else if (href.StartsWith("tel:"))
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
else
{
LauncherOptions options = new LauncherOptions();
options.DisplayApplicationPicker = true;
options.TreatAsUntrusted = true;
var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
}
}
};
Can someone suggest why I am getting very large height even if content is small?
Share Improve this question edited Oct 12, 2016 at 8:47 Kinjan Bhavsar asked Oct 7, 2016 at 16:43 Kinjan BhavsarKinjan Bhavsar 1,44928 silver badges59 bronze badges 16-
I made a demo from your codes, but didn't reproduced your problem. The webView's height got resized correctly. Could you please post the codes of
formItem.I_DEFAULT_VALUEor maybe share a basic demo that can reproduce this problem. And I'm usingWebView.NavigateToStringto render the html content. – Elvis Xia - MSFT Commented Oct 12, 2016 at 8:18 -
@ElvisXia-MSFT I have added
formItem.I_DEFAULT_VALUEand I am also usingWebView.NavigateToString. Also, I am creatingwebviewdynamically using C# not XAML. – Kinjan Bhavsar Commented Oct 12, 2016 at 8:49 -
@ElvisXia-MSFT Also use
window.external.notify('ContentHeight:'+document.body.firstChild.offsetHeight);– Kinjan Bhavsar Commented Oct 12, 2016 at 8:56 - Still not reproduceable. you can try my demo here:WebViewDynamicHeightSample. – Elvis Xia - MSFT Commented Oct 12, 2016 at 9:00
- :-( Don't know why it is not working at my side. I will try to create demo project and will check if I can reproduce the issue in that. – Kinjan Bhavsar Commented Oct 12, 2016 at 9:36
3 Answers
Reset to default 5you could try to parse the string "document.body.scrollHeight.toString()" after your content loads in order to set a new height for your webview. Here's an example with NavigationCompleted but you could use a custom event
public static class WebViewExtensions
{
public static void ResizeToContent(this WebView webView)
{
var heightString = webView.InvokeScript("eval", new[] {"document.body.scrollHeight.toString()" });
int height;
if (int.TryParse(heightString, out height))
{
webView.Height = height;
}
}
}
public Page()
{
MyWebView.NavigationCompleted += (sender, args) => sender.ResizeToContent();
MyWebView.Navigate(new Uri("index.html"));
}
I'm not sure why you are getting a value that is too high, I faced a slightly different issue: the height of the document I got was too small (the height did seemingly not account for images). I have tried multiple events (NavigationFinished, LoadCompleted, ...) but in none of these events I was able to get an accurate height.
What finally worked for me was waiting for a short period until I send back the height of the document. Not exactly a great solution, I hope I will be able to simplify this at some point. Perhaps this also works for your issue.
I inject a script that waits for 100 miliseconds and then sends it back. Even if the image wasn't fully loaded yet, the content size was accurate for me.
window.setTimeout(function () {
var height = document.body.scrollHeight.toString();
window.external.notify("ContentHeight:" + height);
}, 100);
I found the key is to be sure the WebView widgets are visible. If they are invisible due to Visibility or just not yet added to a visible container, then the document.body.scrollHeight won't be a viable way to get the height of the contents. I have a ProgressRing in a modal popup in order to prevent app usage prior to being ready, instead of tying that to visibility.