xamarin.forms在WebView上处理Clicked事件

Question

我想处理WebView控件上的click/tap事件

我已经尝试过GestureRecognizers,但没有任何反应,我想也许WebView可能会使事件处理"真实".

<WebView>
   <WebView.GestureRecognizers>
      <TapGestureRecognizer
              Tapped="OnWebViewClick"
              NumberOfTapsRequired="1" />
   </WebView.GestureRecognizers>
</WebView>

我也尝试过使用c#代码,但没有运气:/

Answer 1

您可以使用HybridWebViewXLabs 中的 ，并使用 javascript 注入来调用和处理 Xamarin 控件中的点击。注入的javascript代码可以在阶段添加点击事件监听器capture。当检测到点击时，它使用Native回调将信息发送回 C# 代码。

例如- 您可以像这样定义自定义控件：

public class ClickEventArgs : EventArgs
{
    public string Element { get; set; }
}

public class ClickableWebView : XLabs.Forms.Controls.HybridWebView
{
    public event EventHandler<ClickEventArgs> Clicked;

    public static readonly BindableProperty ClickCommandProperty =
        BindableProperty.Create("ClickCommand", typeof(ICommand), typeof(ClickableWebView), null);

    public ICommand ClickCommand
    {
        get { return (ICommand)GetValue(ClickCommandProperty); }
        set { SetValue(ClickCommandProperty, value); }
    }

    public ClickableWebView()
    {
        LoadFinished += (sender, e) => 
            InjectJavaScript(@"
            document.body.addEventListener('click', function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                Native('invokeClick', 'tag='+target.tagName+' id='+target.id+' name='+target.name);
            }, true /* to ensure we capture it first*/);
        ");

        this.RegisterCallback("invokeClick", (string el) => {
            var args = new ClickEventArgs { Element = el };

            Clicked?.Invoke(this, args); 
            ClickCommand?.Execute(args);
        });
    }
}

XAML 用法示例

<local:ClickableWebView 
    Uri="https://google.com" 
    Clicked="Handle_Clicked"
/>

和示例代码隐藏

void Handle_Clicked(object sender, CustomWebView.ClickEventArgs e)
{
    Xamarin.Forms.Application.Current.MainPage.DisplayAlert("WebView Clicked", e.Element, "Dismiss");
}

** 输出 **

或者，您也可以ClickCommand使用 MVVM 模式绑定属性来实现此目的。