Question

我正在使用Visual Studio 2013为WP8开发应用程序。我使用WPToolkit来集成WebBrowser控件。

我在WebBrowser控件中显示静态信息，只使用以下函数对文本进行更改。

Private Function CreateHtmlDocument() As String

    Dim strHtmlDoc As String = ""

    strHtmlDoc = "<html>"
    strHtmlDoc = strHtmlDoc & "<head>"
    strHtmlDoc = strHtmlDoc & "<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no';>"
    strHtmlDoc = strHtmlDoc & "</head>"
    strHtmlDoc = strHtmlDoc & "<style type='text/css'>"
    strHtmlDoc = strHtmlDoc & "body{ -ms-touch-action: none !important; -ms-content-zooming:none; -ms-scroll-limit-y-max :auto;}"
    strHtmlDoc = strHtmlDoc & "</style>"
    strHtmlDoc = strHtmlDoc & "<body>"
    strHtmlDoc = strHtmlDoc & "<span style='color:#bf2e1a'><b><font face='Times New Roman' size='3'>" & clsGlobalVariables.branch & "</font></b></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#c1481a'><font face='Times New Roman' size='2'>" & clsGlobalVariables.company_name & "<br> (Legal Name : " & clsGlobalVariables.legal_name & ")</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><p align='left'><font face='Arial' size='2'>" & clsGlobalVariables.address & "</font></p> </span>"
    strHtmlDoc = strHtmlDoc & "<span style='color:#878270'><font face='Arial' size='2'>Tel &nbsp;&nbsp;&nbsp;&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.telephone & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><font face='Arial' size='2'>Fax &nbsp;&nbsp;&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.fax & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br> <span style='color:#878270'><font face='Arial' size='2'>Email&nbsp;:</span> <span style='color:blue'>" & clsGlobalVariables.email & "</font></span>"
    strHtmlDoc = strHtmlDoc & "<br>"
    strHtmlDoc = strHtmlDoc & "<br>"
    strHtmlDoc = strHtmlDoc & "</body>"
    strHtmlDoc = strHtmlDoc & "</html>"


    Return strHtmlDoc

End Function

不幸的是，我似乎无法禁用Pinch Zoom。谢天谢地，双击缩放不起作用。此外，滚动的错误在于滚动超出我的数据并在我的控件中显示空白区域。

一些图片链接（仍然没有10个代表） -

http://i.stack.imgur.com/eifhn.jpg      - How it looks normally.
http://i.stack.imgur.com/0panl.jpg      - It zooms too much.
http://i.stack.imgur.com/znf5y.jpg      - It scrolls way below the text.

我已经尝试http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html了。它不适用于WP8。

我的XAML -

 <Grid HorizontalAlignment="Left" Height="320" Margin="10,274,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
        <phone:WebBrowser x:Name="webBrowser" HorizontalAlignment="Left" Height="320" IsScriptEnabled="True" VerticalAlignment="Top" Width="460" BorderThickness="2" BorderBrush="OrangeRed" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
 </Grid>

Answer 1

这是一个密封的类，所以如果你真的想实现这个目标，那么你需要横向移动VisualTree才能找到正确的容器。

然后只需一个小的解决方法:(禁用缩放，但启用滚动）

硬编码值

<ScrollViewer>
    <phone:WebBrowser x:Name="my_wb" Height="1000" IsHitTestVisible="False"></phone:WebBrowser>
</ScrollViewer>

如果您知道如何将JS值传递回调用Application，则可以完美地调整WebBrowser的大小。

<ScrollViewer>
    <phone:WebBrowser x:Name="my_wb" Height="{Binding HeightOfRenderHTMLpage}" IsHitTestVisible="False"></phone:WebBrowser>
</ScrollViewer>

Answer 2

我上个月遇到了同样的问题（我认为），这是我的解决方案（在C＃中）。

将IsHitTestVisible设置为false以禁用与用户的所有交互并启用IsScriptEnabled为true的脚本

<强> XAML

<ScrollViewer>
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition
              Height="auto" />
          <RowDefinition
              Height="auto" />
          <RowDefinition
              Height="auto" />
      </Grid.RowDefinitions>
      <TextBlock
          Grid.Row="0"
          x:Name="Subject" />
      <TextBlock
          Grid.Row="1"
          x:Name="Date" />
      <phone:WebBrowser
          Grid.Row="2"
          ScriptNotify="browser_ScriptNotify"
          x:Name="browser"
          IsHitTestVisible="False"
          IsScriptEnabled="True" />
  </Grid>
</ScrollViewer>

在将HTML设置为浏览器之前，请使用bodyheight回调注入javascript

<强> C＃

// preparing HTML page with some viewport settings and JS callback to c#
private string PrepareHtml(string body)
{
    return @"<!DOCTYPE html>
             <html>
                <head>
                    <meta name=""viewport"" content=""width=432, initial-scale=1, maximum-scale=1, user-scalable=0, target-densitydpi=device-dpi"" />
                </head>
                <body>
                    " + body + @"

                    <script type=""text/javascript"">

                        window.external.notify(document.body.clientHeight.toString());

                    </script>
                </body>
            </html>";
}

当收到客户端身高通知时，请设置浏览器高度

<强> C＃

void browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    int o;
    if (int.TryParse(e.Value, out o))
    {
        browser.Height = o;
    }
}

希望有所帮助

如何在WP8应用程序的Web浏览器控件中禁用缩放和滚动？

2 个答案: