如何在 Webview 中为任何网站设计右键菜单? [英] How to design a right click menu in Webview for any website?

问题描述

我知道如何实现 InvokeScriptAsync 以获取 uwp 中 Webview 控件中指定网站中任何超链接的 Url，并且通过在清单的 Content URI 部分中指定网站，我没有任何问题地做到了.

但是，我在商店中遇到了几个浏览器，在这些浏览器中，无论 URL 是什么，我都会在所有网站的网页上看到右键单击菜单.例如，Microsoft 商店中的UCBrowser UWP"，该浏览器具有在任何网站中获取右键单击的 URL 的能力.怎么做?

总而言之，我想设计一个右键菜单，至少在任何网站上都有在另一个标签中打开链接"菜单.

解决方案

如何在 Webview 中为任何网站设计右键菜单?

html 中有 oncontextmenu 事件，用于检测右键单击.您可以使用 WebView InvokeScriptAsync 将检测到的方法注入到 html 页面中的 eval 函数中.当右键单击时，您可以使用 window.external.notify 回调.

例如

为

这是您可以参考的代码示例.

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.

解决方案

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 .

And this is code sample that you could refer.

这篇关于如何在 Webview 中为任何网站设计右键菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！