Question

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

在新闻阅读器页面中，相关内容将放置在webview下方。在这种情况下，我想我无法使用WebView滚动条导航到webview下面的相关文章。在Stackoverflow中进行一些浏览之后，我找到了解决此问题的一些方法。

以下是布局的代码示例：

<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;

            }
        }
     }

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

屏幕截图位于： http://imgur.com/170p7gN

这有什么解决方法吗？或者，如果你有另一个解决方案来处理这个条件（标题，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英寸
使用Windows Phone 8.1的Lumia 520

webview 在以下设备中显示正常内容：

使用Windows Phone 10技术预览版的Lumia 730
使用Windows Phone 10技术预览版的Lumia 920
使用Windows Phone 8.1的Lumia 930（2GB内存）
仿真器8.1 1080P（5.5和6英寸，以及2 GB的我的PC RAM）

似乎这是微软方面的一个错误，这很奇怪。在WP 8.1或Windows 10 Webview中需要大内存（2GB）。希望它可以提供帮助。

带有scrollviewer的Windows Phone 8.1动态WebView内容

1 个答案: