Open links in external browser in WebView (WinRT)

Igor Kulman picture Igor Kulman · Oct 3, 2012 · Viewed 7.3k times · Source

I have a WebView component that I use to display HTML Ads in my app. When user clicks an Ad in the WebView I want to open the Ad link in an external browser. How do I do that?

I need something like OnNavigating from the WP7 browser. I tried the Tapped event of the WebView but it never gets called even when I set IsTapEnabled=true. I need something like

Answer

Akinwale picture Akinwale · Oct 6, 2012

You will need to use the ScriptNotify event for this. Here's how I handled the scenario (using NavigateToString). If you're retrieving the web view content from a URL, you will need be able to modify the HTML for this to work.

  1. Add the following Javascript code to your HTML

    <script type="text/javascript">for (var i = 0; i < document.links.length; i++) { document.links[i].onclick = function() { window.external.notify('LaunchLink:' + this.href); return false; } }</script>
    

    This adds an onclick handler to every link (<a href="..."></a>) on the page. window.external.notify is a Javascript method that works in the Webview.

  2. Add the ScriptNotify event handler to the webview.

    WebView.ScriptNotify += WebView_ScriptNotify;
    
  3. Declare the event handler

    async private void WebView_ScriptNotify(object sender, NotifyEventArgs e)
    {
        try
        {
            string data = e.Value;
            if (data.ToLower().StartsWith("launchlink:"))
            {
                await Launcher.LaunchUriAsync(new Uri(data.Substring("launchlink:".Length), UriKind.Absolute));
            }
        }
        catch (Exception)
        {
            // Could not build a proper Uri. Abandon.
        }
    }
    

Note that you if you're using an external URL, this has to be added to the webview's allowed Uris whitelist (http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.scriptnotify for reference).