Android：WebView 触摸事件监听器

Posted 2023-05-07

【中文标题】Android：WebView 触摸事件监听器

【英文标题】：Android: WebView touch event listener

【发布时间】：2019-01-27 14:37:05

【问题描述】：

是否可以在我在 webview 上定义的屏幕的某些部分启用/禁用触摸事件？

【问题讨论】：

据我所知不是直接的。你能在WebView 上添加一个（透明的）视图吗？这将拦截触摸事件。

【参考方案1】：

可以在你的网页中通过javascript定义你的动作，然后在你的android代码中触发一个java方法

正如提到的here 定义如下接口：

/** Instantiate the interface and set the context  */
class WebAppInterface(private val mContext: Context) 

    /** Show a toast from the web page  */
    @JavascriptInterface
    fun showToast(toast: String) 
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    

然后附加到webView

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

你应该在你的网页中实现如下功能，并在需要时触发它

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) 
        Android.showToast(toast);
    
</script>

【讨论】：

我可能没有在这个问题上说清楚。我不是在问如何触发某些功能，而是在问是否可以在我的 Android 上的 webview 上进行，我只定义了一些区域来捕捉视图中的触摸，而不是整个视图。就像视图上的一些部分..

@That_some_guy 是与页面内容相关的区域还是只是屏幕的特定部分？

在屏幕上，例如webView的左上角、右下角有按钮，其余的内容是透明的，让用户使用应用程序。 webview 大小是屏幕的大小。 webview上的触摸仅在左上角和右下角启用，其余禁用。

@That_some_guy 看看这篇文章***.com/questions/3476779/…

【参考方案2】：

实际上现在 webview 不支持 Touch Actions。但是有一些解决方法可用；我将通过一个 longpress 示例来展示它：我正在使用 Pointoption，因为我将获取元素的坐标并将其用于 longpress。

public void longpress(PointOption po) 
   //first you need to switch to native view
    driver.switchToNativeView();
    TouchAction action = new TouchAction((PerformsTouchActions) driver);
    action.longPress(po).waitAction(WaitOptions.waitOptions(Duration.ofSeconds(2)));
    action.release();
    action.perform();
    driver.switchToDefaultWebView();

为了得到我在methood下设计的元素的坐标

public PointOption getElementLocation(WebElement element) 
    int elementLocationX;
    int elementLocationY;

    //get element location in webview
    elementLocationX = element.getLocation().getX();
    elementLocationY = element.getLocation().getY();

    //get the center location of the element
    int elementWidthCenter = element.getSize().getWidth() / 2;
    int elementHeightCenter = element.getSize().getHeight() / 2;
    int elementWidthCenterLocation = elementWidthCenter + elementLocationX;
    int elementHeightCenterLocation = elementHeightCenter + elementLocationY;

    //calculate the ratio between actual screen dimensions and webview dimensions
    float ratioWidth = device.getDeviceScreenWidth() / ((MobileDevice) device)
            .getWebViewWidth().intValue();
    float ratioHeight = device.getDeviceScreenHeight() / ((MobileDevice) device)
            .getWebViewHeight().intValue();

    //calculate the actual element location on the screen , if needed you can increase this value,for example i used 115 for one of my mobile devices.
    int offset = 0;  


    float elementCenterActualX = elementWidthCenterLocation * ratioWidth;
    float elementCenterActualY = (elementHeightCenterLocation * ratioHeight) + offset;
    float[] elementLocation = elementCenterActualX, elementCenterActualY;

    int elementCoordinateX, elementCoordinateY;
    elementCoordinateX = (int) Math.round(elementCenterActualX);
    elementCoordinateY = (int) Math.round(elementCenterActualY);
    PointOption po = PointOption.point(elementCoordinateX, elementCoordinateY);
    return po;

现在您有一个 longpress(PointOption po) 和 getElementLocation(Webelement element) 方法可以为您提供 po。现在一切准备就绪，您可以按如下方式使用它们..

longpress(getElementLocation(driver.findElement(By.id("the selector can be any of them(xpath,css,classname,id etc.)")));