Menu
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.com/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?
941
you 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"));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
