xamarin.forms处理WebView上的Clicked事件

xamarin.forms Handle Clicked event on WebView

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

我已经尝试过GestureRecognizers,但是没有任何反应,我认为WebView也许可以使事件处理为" true"。

1
2
3
4
5
6
7
<WebView>
   <WebView.GestureRecognizers>
      <TapGestureRecognizer
              Tapped="OnWebViewClick"
              NumberOfTapsRequired="1" />
   </WebView.GestureRecognizers>
</WebView>

我也在后面使用c#代码尝试了它,但是没有运气:/


我正在使用此技巧:将WebView放在Grid中,然后在同一单元格中插入BoxView。然后在BoxView上放置一个处理程序。


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

例如-您可以定义一个自定义控件,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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用法示例

1
2
3
4
<local:ClickableWebView
    Uri="https://google.com"
    Clicked="Handle_Clicked"
/>

和示例代码

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

**输出**

sample


另一种选择是处理html中的点击并执行不会在任何地方进行的导航。您可以在html

中放入类似的内容

1
...

因此,在其中的任何位置单击都会导致导航。如果只有一个按钮,则可以使用

1
...

然后在WebView控件中连接"导航"事件,并检查新的URL是否包含"#click "。如果是这样,请执行您的点击处理代码,并在事件中调用e.Cancel = true,以防止浏览器完成导航。

请注意,onclick处理程序不适用于Xamarin Webview中的正文或文档元素。至少不在iOS上。


手势识别器不适用于WebView。您可以尝试使用MR.Gestures

要获得所有功能,您必须购买许可证。

If you forget to configure the license key properly or the key does not match your app name, then all the events will still be raised, but the properties of the EventArgs will be empty. That may be enough for the tap and long press events, but not for the more complicated ones.


一个更简单的解决方法是在您的Web视图上使用\\'Focused \\'事件。您可以如下实现:

1
2
3
4
5
6
7
8
9
10
11
12
var wb = new WebView
{
  HorizontalOptions = LayoutOptions.FillAndExpand,
  VerticalOptions = LayoutOptions.FillAndExpand,
  Source ="https://stackoverflow.com/questions/56320611/webview-gesturerecognition-not-working-in-xamarin-forms",
};

wb.Focused += (s, e) =>
{
   //Handle your logic here!
   wb.Unfocus();
};