wpf 调整 WP8 WebBrowser 高度以适应内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22243614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing WP8 WebBrowser Height to Fit Content
提问by Goofy
i have webbrowser control where i am displaying the content.
我有 webbrowser 控件，我可以在其中显示内容。
Here is the code :
这是代码：
<Grid MinHeight="80"
Grid.Row="2"
Background="Red"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<phone:WebBrowser Name="webBrowser1"
Height="Auto"
IsScriptEnabled="True"
ScriptNotify="webBrowser1_ScriptNotify"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Foreground="Black" Width="Auto"></phone:WebBrowser>
</Grid>
In .CS file;
在 .CS 文件中；
webBrowser1.NavigateToString("<html><head></head><body bgcolor=#d5e1f3><p style=font-family:arial><font size=3><center>" + content + "</center></font></p></body></html>");
here content is:
这里的内容是：
string content = "Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";
But i have searched for this issue and found many posts but none of them works for me:
但是我搜索了这个问题并找到了很多帖子，但没有一个对我有用：
1) Vertical stretch WebBrowser to fit content inside
2) http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/
2) http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/
4) http://i.nt.ro/how-do-you-resize-a-webbrowser-control-to-fit-on-a-html-element/
4) http://i.nt.ro/how-do-you-resize-a-webbrowser-control-to-fit-on-a-html-element/
How to solve this issue ?
如何解决这个问题？
EDIT
编辑
Ok the complete XAMl:
好的，完整的 XAMl：
<phone:PhoneApplicationPage
x:Class="POCBase.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Name="AppName" Text="" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Name="PageName" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid MinHeight="80"
Grid.Row="1"
Background="Red"
HorizontalAlignment="Stretch"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.20*"></ColumnDefinition>
<ColumnDefinition Width="0.80*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Height="60"
Width="60"
Grid.Column="0"
Margin="0,0,20,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"></Image>
<TextBlock Text="Addition Rule "
Name="Inilinetext"
FontSize="32"
Grid.Column="1"
TextWrapping="Wrap"
Padding="10,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
TextAlignment="Left"></TextBlock>
</Grid>
<Grid MinHeight="80"
Grid.Row="2"
Background="Red"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<phone:WebBrowser Name="webBrowser1"
Height="Auto"
IsScriptEnabled="True"
ScriptNotify="webBrowser1_ScriptNotify"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Foreground="Black" Width="Auto"></phone:WebBrowser>
</Grid>
<Grid MinHeight="80"
Grid.Row="3"
Background="Red"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.20*"></ColumnDefinition>
<ColumnDefinition Width="0.80*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Height="60"
Width="60"
Grid.Column="0"
Margin="0,0,20,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"></Image>
<TextBlock Text="Addition Rule "
FontSize="32"
Grid.Column="1"
TextWrapping="Wrap"
Padding="10,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
TextAlignment="Left"></TextBlock>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
回答by Romasz
To make this work your HTML must end with JavaScript which will inform the WebBrowser about document Size.
要完成这项工作，您的 HTML 必须以 JavaScript 结尾，JavaScript 将通知 WebBrowser 有关文档大小的信息。
The code you have provided lacks this script, so no script is processed and webBrowser1_ScriptNotifyis not fired.
您提供的代码缺少此脚本，因此不会处理脚本webBrowser1_ScriptNotify也不会触发。
Here at CodeProjectis shown how it can look like.
在 CodeProject中展示了它的外观。
EDIT
编辑
I've fought with it for a little while and finding Size of rendered Html is not so simple (for me - I'm a complete newbie in JavaScript, so maybe you will have better knowledge).
我已经与它斗争了一段时间，发现渲染的 Html 的大小并不是那么简单（对我来说 - 我是 JavaScript 的完全新手，所以也许你会有更好的知识）。
You can define your <script>in html, then at the end run it or define in body onLoad:
你可以<script>在 html 中定义你的，然后在最后运行它或定义body onLoad：
string content = @"Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";
string newHtmlString = @"<head></head><body bgcolor=#d5e1f3
onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
<div id='content'><p style=font-family:arial><font size=3><center>";
newHtmlString += content + @"</center></p></div></body>";
Then after Navigating the following event should change your WebBrowser.Height:
然后在导航以下事件后应更改您的 WebBrowser.Height：
private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
string[] valuePair = e.Value.Split('=');
if (valuePair != null && valuePair[0] == "rendered_height")
webBrowser1.Height = double.Parse(valuePair[1]);
}
回答by Igor Kulman
Have you found this http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/? Works for me.
你找到这个http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/ 了吗？对我来说有效。
Make sure IsScriptEnabled is set to true, subscribe to the ScriptNotify event
确保 IsScriptEnabled 设置为 true，订阅 ScriptNotify 事件
protected void WebBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
Debug.WriteLine("called");
WebBrowser thisBrowser = (WebBrowser)sender;
int height = Convert.ToInt32(e.Value);
double newHeight = height * 1.5;
thisBrowser.Height = newHeight;
Debug.WriteLine(newHeight.ToString());
}
and put his at the end of your html body (the articles does it a bit differently, works for me at the end of the body)
并将他的放在你的 html 正文的末尾（文章的做法有点不同，在正文的末尾对我有用）
<script type="text/javascript">
var elem = document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
</script>
And make sure you have a div id="content and that the debug messages get writtent to the output.
并确保您有一个 div id="content 并且调试消息被写入输出。
回答by R.Titov
Try to use this script
尝试使用此脚本
<script type="text/javascript">
window.onload = function () {
var elem = document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
}
</script>
回答by Ouadie
To get the height from the webview, you can use
要从 webview 获取高度，您可以使用
window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")
window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")
in body.onloadand body.onresize
在body.onload和body.onresize
Here is a complete example of an AdaptativeWebviewthat handle scroll and resize
这是处理滚动和调整大小的AdaptativeWebview的完整示例
