image - 如何从 WebBrowser 控件中的图片导航到 Windows Phone 中的本机页面？

Question

我有一个 WebBrowser 控件来显示一些 HTML 字符串。它有一些 < img src=""> 标签。现在我有一个要求：当用户点击图像时，我将导航到新的原生页面以显示更大的版本并实现缩放功能。但 WebBrowserre 似乎忽略了 TAP 事件。那么，如何从 WebBrowser 控件中的图片导航到 Windows Phone 中的本机页面？

由于这个问题，我不想在 <img> 标记之外添加 <a> 链接

Answer 1

您可以通过 JavaScript 在 WebBrowser 控件中检测图像位置：

function fetchImagePosition()
{ 
    var rect = document.getElementByIdimageId").getBoundingClientRect(); 
        window.external.Notify(rect.left + ',' + rect.top + ',' + rect.right + ',' + rect.bottom);
} 

还要在加载的 HTML 上添加上面的脚本执行：

window.onload = function () 
    { 
      var elem = document.getElementById('content');                                    
window.external.Notify(elem.scrollHeight + ''); fetchLinkPosition();} 

使您WebBrowser能够执行 JavaScript IsScriptEnabled=true。向 WebBrowserScriptNotify事件添加处理程序以捕获图像位置并将其保存到本地字段：

  private void BrowserScriptNotify(object sender, NotifyEventArgs e)
        {
                var rectBoundaries = e.Value.Split(',').Select(double.Parse).ToArray();
                var rectHeight = rectBoundaries[3] - rectBoundaries[1];
                var rectWidth = rectBoundaries[2] - rectBoundaries[0];
                _imageRect= new Rect(rectBoundaries[0], rectBoundaries[1], rectWidth, rectHeight);

        }

将Tap事件处理程序添加到您的LayoutRoot：

  private void LayoutRootTap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            var point = e.GetPosition(Browser);
            if (_imageRect.Contains(point))
            {
               NavigationService.Navigate("YourPageUri");
            }
        }