Windows Phone 8.1 带有滚动查看器的动态 WebView 内容

Question

我正在创建一个 Windows Phone 8.1（RT，不是 silverlight）新闻 reader 应用程序。我们的客户给了我们一个 API 并且新闻内容使用了 html 标签。这种方法导致我们使用 WebView 来呈现内容。

在新闻reader页面中，有相关内容会放在webview下方。在这种情况下，我认为我无法使用 WebView 滚动条导航到 Web 视图下方的相关文章。在 Whosebug 中浏览一番后，我找到了解决此问题的方法。

这里是布局的代码示例：

<Grid Name="MainGrid" Margin="0,-30,0,0">
    <ScrollViewer Name="ScrollViewer">
        <Grid x:Name="LayoutRoot" Height="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Name="GridHeader">
                <Image Stretch="UniformToFill" Source="ms-appx:///Assets/img_default_header.jpg" />
             </Grid>                
            <Grid Grid.Row="1" x:Name="GridNews" Margin="12,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <WebView Margin="-6,12,0,-6" Grid.Row="0" x:Name="WebviewContent" VerticalAlignment="Top" DefaultBackgroundColor="Transparent" /> 
                <Rectangle Margin="0,12,0,0" Height="{Binding Height, ElementName=WebviewContent}" Name="RecWeb" VerticalAlignment="Top" Fill ="#00000000" Tapped="RecWeb_Tapped" />
            </Grid>
            <Grid Name="GridRelatedNews" Grid.Row="2" Margin="12,0">
                <ListView ItemsSource="{Binding NewsDetail.RelatedStory}" ScrollViewer.VerticalScrollBarVisibility="Hidden">  
                </ListView>
            </Grid>
</Grid>

我在 webview 中使用矩形作为覆盖层，因此用户可以使用 scrollviewer 进行滚动。我还在从 API:

返回的每个 html 字符串中添加了一个 javascript

string htmlFragment = @"
                                        <html>
                                            <head>
                                            <meta name=""viewport"" content=""width="+width+@", initial-scale=1, user-scalable=no"" />
                                                <script type=""text/javascript"">
                                                    function loadLink(x,y){
                                                    window.external.notify('x='+x+'y='+y);
                                                    var el = document.elementFromPoint(x, y);
                                                    el.click();};                                                   
                                                </script>
                                            <style>
                                            " + CSS + @"
                                            </style>
                                            </head>
                                            <body onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
                                                <div id='content' style=""font-size:" + AppManager.Instance.CurrentSetting.FontOption + @"px; color:#222222;"">" + original +
                                              @"</div>
                                            </body>
                                        </html>";

并添加了 webview webscript 通知事件以确定 webview（和矩形）的渲染高度：

void WebviewContent_ScriptNotify(object sender, NotifyEventArgs e)
    {
        if (e.Value.Contains("rendered_height"))
        {
            if (valuePair != null && valuePair[0] == "rendered_height")
            {
                double renderedHeight = double.Parse(valuePair[1]);                 
                WebviewContent.Height = renderedHeight;

            }
        }
     }

此解决方案大部分时间都适用于较短的内容，但主要问题 每当渲染一些较长的内容（WebView 高度大约 5000 像素以上）时，就会出现一些奇怪的问题在我的 rectangle/WebView 上方的某些部分有白色层（奇怪的是，长内容的中间部分被渲染了）。

截图在这里：http://imgur.com/170p7gN

有什么解决方法吗？或者，如果您有其他解决方案来处理这种情况（header、html 内容和 html 内容下方的网格），请告诉我。

谢谢

Answer 1

在我的设备和模拟器中测试后，这种奇怪的行为可以在以下设备中重现：

Lumia 920 Windows Phone 8.1（1GB 内存）
仿真器 8.1 WVGA 4 英寸 512 MB
仿真器 8.1 WVGA 4 英寸
模拟器 8.1 WXGA 4.5 英寸
模拟器 8.1 720P 4.7 英寸
Lumia 520 Windows Phone 8.1

网络视图在以下设备中正常显示内容：

Lumia 730 Windows Phone 10 技术预览
Lumia 920 Windows Phone 10 技术预览
Lumia 930 Windows Phone 8.1（2GB RAM）
模拟器 8.1 1080P（5.5 和 6 英寸，占用 2GB 我的电脑内存）

这似乎是微软方面的一个错误，很奇怪。您需要 WP 8.1 中的大内存 (2GB) 或 Windows 10 Webview。希望对你有帮助。

Windows Phone 8.1 带有滚动查看器的动态 WebView 内容

Windows Phone 8.1 dynamic WebView content with scrollviewer

c#

windows-phone

windows-phone-8.1