1

I know how to implement the InvokeScriptAsync to get the Url of any hyperlink in a specified website in Webview control in uwp, and I have done it without any issues, by specifying websites in Content URI section in manifest.

But, I come across several browsers in store, in which I see right click menus on web pages on all Websites whatever the URL is. For example, "UCBrowser UWP" which is in Microsoft store, this browser has capability of getting right clicked URL in any Website. How it could be done?

To summarize, I want to design a right click menu, with at-least "Open link in another Tab" menu, from any website.

Mg Bhadurudeen
  • 1,140
  • 1
  • 12
  • 24

1 Answers1

1

How to design a right click menu in Webview for any website?

There is oncontextmenu event in html that use to detect right click. And you could use WebView InvokeScriptAsync to inject detected method to eval function where in the html page. And when right click fired, you could use window.external.notify call back.

For example

Create right click menu for <a> tag.

public MainPage()
{
    this.InitializeComponent();

    MyWebView.LoadCompleted += MyWebView_LoadCompleted;
}

private async void MyWebView_LoadCompleted(object sender, NavigationEventArgs e)
{
    string functionString = @"var anchors = document.querySelectorAll('a');      
  for (var i = 0; i < anchors.length; i += 1) {
        anchors[i].oncontextmenu = function (e) {
            var e = e||window.event;  
            var oX = e.clientX;
            var oY = e.clientY;
            var href = this.getAttribute('href');
            window.external.notify([oX.toString(), oY.toString(), href].toString());
        };
    }";
    await MyWebView.InvokeScriptAsync("eval", new string[] { functionString });
}

private void MyWebView_ScriptNotify(object sender, NotifyEventArgs e)
{
    var items = e.Value.Split(',');
    MenuFlyout myFlyout = new MenuFlyout();
    MenuFlyoutItem firstItem = new MenuFlyoutItem { Text = "Open new tab" };
    myFlyout.Items.Add(firstItem);
    myFlyout.ShowAt(sender as UIElement, new Point(System.Convert.ToDouble(items[0]) , System.Convert.ToDouble(items[1])));
}

Please note

Allowed sites are specified in the Content URIs section of Package.appxmanifest and cannot contain domain wildcards and must be https .

enter image description here

And this is code sample that you could refer.

Nico Zhu
  • 32,367
  • 2
  • 15
  • 36
  • Thanks. but my question is, I know to implement the code to get right clicked url in sites already specified in Content URIs section, but how some store apps show right click menu(to open r.clicked url in new tab) on all sites? Is it possible to include all 200 million websites in content url section? How UCBrowser UWP achieves this? – Mg Bhadurudeen Jun 04 '19 at 08:40
  • We don't sure the engine of UCBrowser is WebView control. if you do want this feature, I think you could refer this [case reply](https://stackoverflow.com/questions/43479496/how-to-javascript-notify-with-ms-appdata-on-windows-10-uwp/43493358#43493358) and download the html content to the local storage and use IUriToStreamResolver to load it – Nico Zhu Jun 04 '19 at 10:01