Floating menu on a webview - UWP

Question

I wish you could guide me on one thing. How to do when I right click on a link opened in a Webview open a menu of options with functions such as copy link and open link?

Answer 1

To interact with Webview this way it is necessary to work with Invokescriptasync and Scriptnotify.

Basically, an event is triggered when a given command of a script is running within the Webview (see references for more details).

In this example the scriptsearch for the tag <a> for an event to be triggered whenever the right mouse button is pressed on script used here (contextmenu) is responsible for 'simulating' this action. (js not my strong suit)

Xaml from Webview:

<WebView Grid.Row="1" Name="WebView" 
                Margin="5,5,5,5"
                NavigationCompleted="WebView_OnNavigationCompleted"
                ScriptNotify="WebView_OnScriptNotify"
                Source="http://google.com"/>

Code Behind:

private async void WebView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            await WebView.InvokeScriptAsync("eval", new[]
            {
                "var Anchors = document.getElementsByTagName(\"a\");" +
                "for (var i = 0; i < Anchors.length ; i++) {" +
                "    Anchors[i].addEventListener(\"contextmenu\", " +
                "        function (event) {" +
                "            window.external.notify(this.href);" +
                "        }," +
                "        false);" +
                "}"
            });
        }

    private void WebView_OnScriptNotify(object sender, NotifyEventArgs e)
    {
        var pointer = Window.Current.CoreWindow.PointerPosition;
        var url = e.Value;

        Ppup.HorizontalOffset = pointer.X - 300;
        Ppup.VerticalOffset = pointer.Y - 60;

        Ppup.IsOpen = true;
    }

Inside the script that is 'injected' through the WebView.InvokeScriptAsync window.external.notify(this.href) is responsible for 'notifying' the Webview (WebView_OnScriptNotify)

---

It is necessary to define the urls that they can use window.external.notify to trigger events, for this, in your package.appxmanifest (Right click on the project > properties) add as example shown in the image:

---

See the result:

Source code:
https://github.com/rubgithub/WebViewScriptNotify

References:
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.webview.invokescriptasync.aspx https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.scriptnotify https://code.msdn.microsoft.com/windowsapps/Popup-Control-in-universel-700d46d4 https://stackoverflow.com/questions/36746705/how-can-i-move-the-mouse-in-a-uwp-app https://code.msdn.microsoft.com/windowsapps/Invoke-ScriptNotify-event-4e9e13a4 https://stackoverflow.com/questions/6041593/adding-click-event-via-addeventlistener-to-confirm-navigation-from-a-hyperlink/6042019#6042019