如何为Xamarin Forms WebView的链接长按事件添加自定义函数？

嘿，作为Xamarin.Forms新手，你这个需求太实用了——在WebView里给链接加长按触发自定义操作（比如上下文菜单）确实有点绕，但完全可以搞定！就像你说的，默认WebView不支持直接绑定手势识别器，不过我们可以借鉴XLabs HybridWebView的核心思路：通过JS注入监听网页内的长按事件，再把链接信息传递给原生渲染器，最后触发Forms层的自定义事件。而且完全能获取到被长按的链接地址，下面给你一步步的示例：

第一步：创建带自定义长按事件的WebView控件（Forms层） #

首先我们要定义一个继承自WebView的自定义控件，用来承载我们的长按事件：

using Xamarin.Forms;

public class CustomHybridWebView : WebView
{
    // 定义自定义事件，参数是被长按的链接地址
    public event EventHandler<string> LinkLongPressed;

    // 供原生渲染器调用，触发Forms层的事件
    internal void TriggerLinkLongPressed(string url)
    {
        LinkLongPressed?.Invoke(this, url);
    }
}

第二步：注入JS代码监听网页内的链接长按 #

当WebView加载完成后，我们需要注入一段JS代码，给页面中所有<a>标签添加长按监听。这里要兼顾移动端的触摸长按和桌面端的右键（模拟长按），同时阻止系统默认的上下文菜单：

public MainPage()
{
    InitializeComponent();

    var customWebView = new CustomHybridWebView
    {
        Source = new UrlWebViewSource { Url = "https://你的测试网页地址.com" }
    };

    // 网页加载完成后注入JS
    customWebView.Navigated += async (sender, e) =>
    {
        string jsCode;
        // 区分iOS和Android的JS通信方式
        if (Device.RuntimePlatform == Device.iOS)
        {
            jsCode = @"
document.addEventListener('DOMContentLoaded', function() {
    const links = document.getElementsByTagName('a');
    for(let link of links) {
        // 监听右键（桌面端）
        link.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // 阻止系统默认菜单
            window.webkit.messageHandlers.linkLongPressHandler.postMessage(this.href);
        });
        // 监听触摸长按（移动端）
        link.addEventListener('touchstart', function(e) {
            const self = this;
            this.longPressTimer = setTimeout(() => {
                window.webkit.messageHandlers.linkLongPressHandler.postMessage(self.href);
            }, 800); // 800ms判定为长按，可按需调整
        });
        link.addEventListener('touchend', function() {
            clearTimeout(this.longPressTimer);
        });
    }
});";
        }
        else
        {
            jsCode = @"
document.addEventListener('DOMContentLoaded', function() {
    const links = document.getElementsByTagName('a');
    for(let link of links) {
        link.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            window.postMessage(this.href);
        });
        link.addEventListener('touchstart', function(e) {
            const self = this;
            this.longPressTimer = setTimeout(() => {
                window.postMessage(self.href);
            }, 800);
        });
        link.addEventListener('touchend', function() {
            clearTimeout(this.longPressTimer);
        });
    }
});";
        }

        await customWebView.EvaluateJavaScriptAsync(jsCode);
    };

    // 绑定自定义长按事件，弹出上下文菜单
    customWebView.LinkLongPressed += async (sender, url) =>
    {
        var action = await DisplayActionSheet("选择操作", "取消", null, "复制链接", "外部浏览器打开", "分享链接");
        switch (action)
        {
            case "复制链接":
                await Xamarin.Essentials.Clipboard.SetTextAsync(url);
                await DisplayAlert("提示", "链接已复制", "确定");
                break;
            case "外部浏览器打开":
                await Xamarin.Essentials.Launcher.OpenAsync(new Uri(url));
                break;
            // 其他操作自行扩展
        }
    };

    Content = customWebView;
}

第三步：实现原生平台渲染器（Android + iOS） #

因为JS和Forms层不能直接通信，需要通过原生渲染器来接收JS传递的消息，再触发我们自定义控件的事件。

Android平台渲染器 #

在Android项目中创建渲染器类：

using Android.Content;
using Android.Webkit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using 你的命名空间.Droid.Renderers;

[assembly: ExportRenderer(typeof(CustomHybridWebView), typeof(CustomHybridWebViewRenderer))]
namespace 你的命名空间.Droid.Renderers
{
    public class CustomHybridWebViewRenderer : WebViewRenderer
    {
        private CustomHybridWebView _formsWebView;

        public CustomHybridWebViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            _formsWebView = e.NewElement as CustomHybridWebView;

            if (Control != null)
            {
                var webView = Control as Android.Webkit.WebView;
                webView.Settings.JavaScriptEnabled = true;
                webView.Settings.DomStorageEnabled = true;
                // 设置WebChromeClient接收JS的postMessage
                webView.SetWebChromeClient(new CustomWebChromeClient(_formsWebView));
            }
        }
    }

    public class CustomWebChromeClient : WebChromeClient
    {
        private readonly CustomHybridWebView _formsWebView;

        public CustomWebChromeClient(CustomHybridWebView formsWebView)
        {
            _formsWebView = formsWebView;
        }

        public override bool OnJsMessage(WebView view, IJsMessage message)
        {
            // 接收JS传递的链接，触发Forms层事件
            _formsWebView.TriggerLinkLongPressed(message.Message);
            return true;
        }
    }
}

iOS平台渲染器 #

在iOS项目中创建渲染器类：

using Foundation;
using WebKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using 你的命名空间.iOS.Renderers;

[assembly: ExportRenderer(typeof(CustomHybridWebView), typeof(CustomHybridWebViewRenderer))]
namespace 你的命名空间.iOS.Renderers
{
    public class CustomHybridWebViewRenderer : WebViewRenderer, IWKScriptMessageHandler
    {
        private CustomHybridWebView _formsWebView;

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            _formsWebView = e.NewElement as CustomHybridWebView;

            if (Control != null)
            {
                var webView = Control as WKWebView;
                // 添加消息处理器，接收JS的消息
                webView.Configuration.UserContentController.AddScriptMessageHandler(this, "linkLongPressHandler");
            }
        }

        public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
        {
            // 获取JS传递的链接地址
            if (message.Body is NSString urlString)
            {
                _formsWebView.TriggerLinkLongPressed(urlString.ToString());
            }
        }

        // 销毁时移除处理器，避免内存泄漏
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Control?.Configuration.UserContentController.RemoveScriptMessageHandler("linkLongPressHandler");
            }
            base.Dispose(disposing);
        }
    }
}

核心原理说明 #

• 这个方案和XLabs HybridWebView的逻辑一致：利用JS捕获网页内的交互事件，再通过原生WebView的JS桥接能力传递到Forms层，因为直接给WebView加Forms级别的手势识别器会被WebView本身的触摸事件拦截，所以必须用这种JS+原生渲染器的方式。
• 我们可以完美获取到被长按的链接地址，通过JS传递给原生端，再流转到Forms层处理。
• 同时适配了桌面端（右键）和移动端（触摸长按）的场景，覆盖大部分使用情况。

内容的提问来源于stack exchange，提问作者Polarts