How to navigate from a picture in WebBrowser control to a native page in Windows Phone?

Question

I have a WebBrowser control to display some HTML string. and It has some < img src=""> tag in it. Now I have a requirement: when the user tap a image, I will navigate to a new native page to show the larger version and implement something like zoom features. But the WebBrowsre seems ignore the TAP event. So, how to navigate from a picture in WebBrowser control to a native page in Windows Phone?

i don't want to add a < a> link outside the < img> tag because of this issue

Pavel Saniuk Pavel Saniuk · Accepted Answer · 2013-06-07T14:41:11

You can detect your image position in a WebBrowser control via JavaScript:

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

Also add above script execution on your HTML is loaded:

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

Enable your WebBrowser to execute JavaScript IsScriptEnabled=true. Add a handler to WebBrowser ScriptNotify event to catch the image position and save it to a local field:

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

        }

Add Tap event handler to your LayoutRoot:

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

How to navigate from a picture in WebBrowser control to a native page in Windows Phone?

1 Answers