我目前正在开发 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()”，以便为您的网页视图设置新的高度。 这是一个 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"));
}
我不确定为什么你得到的值太高，我遇到了一个稍微不同的问题：我得到的文档的高度太小（高度似乎没有考虑到图像）。我尝试了多个事件（
NavigationFinishedLoadCompleted最终对我有用的是等待一小段时间，直到我发回文档的高度。这不完全是一个很好的解决方案，我希望我能够在某个时候简化它。也许这也适用于您的问题。
我注入一个等待 100 毫秒然后将其发送回来的脚本。即使图像尚未完全加载，内容大小对我来说也是准确的。
window.setTimeout(function () {
var height = document.body.scrollHeight.toString();
window.external.notify("ContentHeight:" + height);
}, 100);
我发现关键是确保 WebView 小部件可见。如果它们由于可见性而不可见或尚未添加到可见容器中，则 document.body.scrollHeight 将不是获取内容高度的可行方法。我在模式弹出窗口中有一个 ProgressRing，以防止应用程序在准备就绪之前使用，而不是将其与可见性联系起来。