Floating Menu in a Webview - UWP

2

I wish you could guide me in one thing. How do I do when I right-click an open link in a Webview open a menu of options with functions like copy link and open link ?     

asked by anonymous 15.01.2017 / 00:46

1 answer

0

To interact with Webview in this way you need to work with InvokeScriptAsync and ScriptNotify .

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

In this example the script looks for the <a> tag so that an event is triggered whenever the right mouse button is pressed on the script used here is responsible for ' simulate 'this action. ( js is not my strong)

Webview Xaml :

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

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 WebView.InvokeScriptAsync window.external.notify(this.href) is responsible for 'notify' Webview ( WebView_OnScriptNotify )

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

  

Seetheresult:

SourceCode:
link

References:
link link link link link / p>     

16.01.2017 / 01:34