如何在Windows 10 UWP中调整基于HTML内容的Webview高度
本文关键字:HTML 高度 Webview 调整 Windows UWP | 更新日期: 2023-09-27 18:12:00
我目前正在Windows 10 UWP应用程序上工作,并面临WebView的问题,当我有较少的HTML内容时,我在javascript中获得更多的高度。我的代码如下
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);
}
formItem。I_DEFAULT_VALUE是HTML without html,head and body tags
,其值为
<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是需要应用的背景色。
和我的script_notify方法如下:
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);
}
}
};
有人可以建议为什么我得到非常大的高度,即使内容很小?
你可以尝试在你的内容加载后解析字符串"document.body.scrollHeight.toString()"以便为你的webview设置一个新的高度。下面是一个使用NavigationCompleted的例子但是你可以使用自定义事件
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"));
}
我不知道为什么你得到的值太高,我面临一个稍微不同的问题:我得到的文档的高度太小(高度似乎没有考虑到图像)。我已经尝试了多个事件(NavigationFinished
, LoadCompleted
,…),但在这些事件中,我都无法获得准确的高度。
最终对我有效的是等待很短的时间,直到我发送回文档的高度。不完全是一个很好的解决方案,我希望我能在某个时候简化它。也许这也适用于你的问题。
我注入一个等待100毫秒的脚本,然后将其发送回来。即使图像尚未完全加载,内容大小对我来说也是准确的。
window.setTimeout(function () {
var height = document.body.scrollHeight.toString();
window.external.notify("ContentHeight:" + height);
}, 100);