如何使用touchstart和touchend事件来跟踪移动设备上跨域iframe的点击

2024-05-04 • 问答

我只是想出了如何在跨域iframe上检测点击事件，但它仅适用于台式机，以下代码在检测iframe内的点击事件时有效，但是，我还需要它在移动设备上运行，我尝试使用touchstart和touchend事件向此脚本添加移动支持，但不起作用。

 //Google ADs track conversion
$( document ).ready(function() { 

        var iframeMouseOver = false;
        var iframeTouched = false;
        $("#wh-widget-send-button")
            .off("mouseover.iframe").on("mouseover.iframe",function() {
                iframeMouseOver = true;
            })
            .off("mouseout.iframe").on("mouseout.iframe",function() {
                iframeMouseOver = false;
            });

        //Add mobile support to this script
        $("#wh-widget-send-button")
            .off("touchstart").on("touchstart",function() {
                iframeTouched = true;
            })
            .off("touchend").on("touchend",function() {
                iframeTouched = false;
            });

        $(window).off("blur.iframe").on("blur.iframe",function() {
            if(iframeMouseOver || iframeTouched){
                 console.log("Iframe Clicked");
                 gtag_report_conversion();
            }
        });
});

更新

所请求的HTML只是div中的一个简单iframe，还清除了上面的代码以专注于重要部分：

<div id="wh-widget-send-button">
  <iframe src="http://anyexternaldomain.com"></iframe>
</div>

我不确定您为什么需要检查悬停或触摸。您只需检查点击并执行操作即可。

主要概念是通过分配pointer-events:none;从iframe中删除事件处理。这将使父元素wh-widget-send-button接收所有事件，然后您可以根据需要进行处理。

您可以尝试以下代码：

$(document).ready(function() {

  $("#wh-widget-send-button").off("click").on("click",function() {
    console.log("Clicked");
   // gtag_report_conversion();
  });
});

iframe
{
   pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wh-widget-send-button">
  <iframe src="http://anyexternaldomain.com"></iframe>
</div>

不幸的是，您试图做的事情是不可能的。网络浏览器的开发人员有意这样做，以避免恶意的点击劫持行为。您无法捕获进入iframe的点击。您目前在台式机上所做的只是跟踪鼠标是否悬停在iframe上，而不是实际上是否单击过鼠标。不幸的是，您甚至无法在移动设备上执行此操作，因为触摸屏上的触摸会自动传输到iframe，因此没有适用于触摸屏的“悬停”概念。不好意思，把坏消息告诉你。

如何使用touchstart和touchend事件来跟踪移动设备上跨域iframe的点击

更新

fengeryar 回答：如何使用touchstart和touchend事件来跟踪移动设备上跨域iframe的点击

大家都在问