Xamarin macOS WebView中iframe内input无法输入，求可行解决方案

问题背景 #

开发的Xamarin macOS应用使用WebView展示内容，初始加载本地HTML页面，页面包含允许嵌入的外部网站iframe（如Vimeo）。在iframe内的text类型input控件中输入内容时，keypress/keydown事件未触发，无法输入文本。按下Control+Tab后恢复正常，排查发现是iframe内控件获得焦点，但WebView中的iframe本身未获取焦点导致。当前使用Xamarin Forms版本5.0.0.2196。

可行解决方法 #

方法1：通过WebView原生代理处理焦点事件 #

核心思路是监听iframe的焦点请求，强制WebView的原生视图成为第一响应者，确保焦点事件能正常传递：

1. 扩展自定义WebViewRenderer，重写OnElementChanged方法并设置自定义UIDelegate：

using WebKit;
using Xamarin.Forms.Platform.MacOS;

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourAppNamespace.MacOS
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            
            if (NativeView is WKWebView wkWebView)
            {
                wkWebView.UIDelegate = new CustomWKUIDelegate(wkWebView);
            }
        }
    }

    public class CustomWKUIDelegate : WKUIDelegate
    {
        private readonly WKWebView _webView;

        public CustomWKUIDelegate(WKWebView webView)
        {
            _webView = webView;
        }

        public override void DidFocusElement(WKWebView webView, WKFocusedElementInfo focusedElementInfo)
        {
            base.DidFocusElement(webView, focusedElementInfo);
            
            // 检测是否为iframe内的元素
            if (focusedElementInfo.Frame != null && !focusedElementInfo.Frame.IsMainFrame)
            {
                // 让WebView成为窗口的第一响应者
                _webView.Window.MakeFirstResponder(_webView);
            }
        }
    }
}

2. 直接使用默认WebView即可，渲染器会自动替换原生实现。

方法2：通过JS注入通知原生获取焦点 #

在本地HTML中注入JS监听iframe焦点变化，再通知原生WebView获取焦点：

1. 在本地HTML的window.onload中添加监听逻辑：

<script>
window.onload = function() {
    const targetIframe = document.querySelector('iframe');
    if (targetIframe) {
        // 监听iframe内的焦点事件
        targetIframe.contentWindow.addEventListener('focus', () => {
            // 通过WebKit消息通道通知原生代码
            window.webkit.messageHandlers.focusHandler.postMessage('focus');
        }, true);
    }
};
</script>

2. 在自定义WebViewRenderer中添加消息处理器：

public class CustomWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        
        if (NativeView is WKWebView wkWebView)
        {
            wkWebView.Configuration.UserContentController.AddScriptMessageHandler(new FocusMessageHandler(wkWebView), "focusHandler");
        }
    }
}

public class FocusMessageHandler : NSObject, IWKScriptMessageHandler
{
    private readonly WKWebView _webView;

    public FocusMessageHandler(WKWebView webView)
    {
        _webView = webView;
    }

    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        if (message.Body.ToString() == "focus")
        {
            _webView.Window.MakeFirstResponder(_webView);
        }
    }
}

方法3：加载完成后强制WebView获取焦点 #

在WebView加载完成后，主动设置其为第一响应者，提前规避焦点传递问题：

public class CustomWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        
        if (NativeView is WKWebView wkWebView)
        {
            wkWebView.NavigationDelegate = new CustomWKNavigationDelegate(wkWebView);
        }
    }
}

public class CustomWKNavigationDelegate : WKNavigationDelegate
{
    private readonly WKWebView _webView;

    public CustomWKNavigationDelegate(WKWebView webView)
    {
        _webView = webView;
    }

    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        base.DidFinishNavigation(webView, navigation);
        // 加载完成后强制WebView获取焦点
        _webView.Window.MakeFirstResponder(_webView);
    }
}

验证说明 #

三种方法核心都是确保WebView原生视图成为第一响应者，让iframe内的焦点事件能正常传递到系统。优先尝试方法1，原生代理的兼容性和可靠性更强。

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