如何在Windows Phone 7 中自动调整WebBrowser 控件高度?
How to auto adjust WebBrowser control height in Windows Phone 7?
我在 xaml 中创建了一个 WebBrowser 控件,
并通过字符串将一些 html 绑定到它。它工作正常。
但是 WebBrowser 永远不会自动调整它的高度。
<phone:WebBrowser
HorizontalAlignment="Stretch"
Margin="0,6,0,0" Name="myWebView"
VerticalAlignment="Top" />
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
String htmlTags = "<html><head><meta charset='UTF-8'/><meta name=\"viewport\" content=\"width='480', initial-scale='1'\"></head><body><center>{0}</center></body></html>";
myWebView.NavigateToString(String.Format(htmlTags, getHTMLContent());
}
public string getHTMLContent()
{
StringBuilder htmlBody = new StringBuilder();
htmlBody.Append("<table cellpadding=\"0\" cellspacing=\"0\" width=\"704\" height=\"484\" background=\"https://known.com/img/back/123456.jpg\" style=\"background-repeat: no-repeat; background-position: center;\">");
htmlBody.Append("<tr>");
htmlBody.Append("<td valign=top>");
htmlBody.Append("<div style=\"position: absolute;\">");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 132px; height: 132px; top: 44px; left: 44px; z-index:0;\">");
htmlBody.Append("<img src=\"https://known.com/img/icon/87654.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 704px; height: 484px; top: 0px; left: 0px; z-index:0; \">");
htmlBody.Append("<img src=\"https://known.com/img/icon/234255.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 440px; height: 264px; top: 184px; left: 184px; z-index:0; font-family:times; font-size:14px; color:#FFFFFF; \" align=\"center\">");
htmlBody.Append("<div style=\"display: table-cell;vertical-align: middle;\">");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</td>");
htmlBody.Append("</tr>");
htmlBody.Append("</table>");
return htmlBody.ToString();
}
我希望 WebBrowser 成为什么
1) 自动调整其高度取决于HTML 字符串。如果我只传递一个图像意味着,它应该根据图像自动调整。
没有内容的意思,浏览器应该自己隐藏。
2) 不应滚动,因为 WebBrowser 已经拉伸其高度以适应内容。
我怎样才能做到?请让我知道如何解决我的问题。
您需要使用 javascript 获取呈现的高度 html 并将其设置为您的 WebBrowser 控件。
这是 this 的一个实现。
我在 xaml 中创建了一个 WebBrowser 控件, 并通过字符串将一些 html 绑定到它。它工作正常。 但是 WebBrowser 永远不会自动调整它的高度。
<phone:WebBrowser
HorizontalAlignment="Stretch"
Margin="0,6,0,0" Name="myWebView"
VerticalAlignment="Top" />
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
String htmlTags = "<html><head><meta charset='UTF-8'/><meta name=\"viewport\" content=\"width='480', initial-scale='1'\"></head><body><center>{0}</center></body></html>";
myWebView.NavigateToString(String.Format(htmlTags, getHTMLContent());
}
public string getHTMLContent()
{
StringBuilder htmlBody = new StringBuilder();
htmlBody.Append("<table cellpadding=\"0\" cellspacing=\"0\" width=\"704\" height=\"484\" background=\"https://known.com/img/back/123456.jpg\" style=\"background-repeat: no-repeat; background-position: center;\">");
htmlBody.Append("<tr>");
htmlBody.Append("<td valign=top>");
htmlBody.Append("<div style=\"position: absolute;\">");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 132px; height: 132px; top: 44px; left: 44px; z-index:0;\">");
htmlBody.Append("<img src=\"https://known.com/img/icon/87654.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 704px; height: 484px; top: 0px; left: 0px; z-index:0; \">");
htmlBody.Append("<img src=\"https://known.com/img/icon/234255.jpg\" width=\"100%\" height=\"100%\"/>");
htmlBody.Append("</div>");
htmlBody.Append("<div style=\"position: absolute; display: table; width: 440px; height: 264px; top: 184px; left: 184px; z-index:0; font-family:times; font-size:14px; color:#FFFFFF; \" align=\"center\">");
htmlBody.Append("<div style=\"display: table-cell;vertical-align: middle;\">");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</div>");
htmlBody.Append("</td>");
htmlBody.Append("</tr>");
htmlBody.Append("</table>");
return htmlBody.ToString();
}
我希望 WebBrowser 成为什么
1) 自动调整其高度取决于HTML 字符串。如果我只传递一个图像意味着,它应该根据图像自动调整。 没有内容的意思,浏览器应该自己隐藏。
2) 不应滚动,因为 WebBrowser 已经拉伸其高度以适应内容。
我怎样才能做到?请让我知道如何解决我的问题。
您需要使用 javascript 获取呈现的高度 html 并将其设置为您的 WebBrowser 控件。
这是 this 的一个实现。