[英]How to use touchstart and touchend events to track click on a cross domain iframe on mobile devices
我刚刚想出了如何检测跨域 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 按照要求,它只是一个简单的 iframe 在一个 div 中,还清除了上面的代码,以专注于重要部分:
<div id="wh-widget-send-button">
<iframe src="http://anyexternaldomain.com"></iframe>
</div>
我不确定您为什么需要检查 hover 或触摸。 您只需检查单击并执行操作。
主要概念是通过分配pointer-events:none;
. 这将使父元素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>
不幸的是,您尝试做的事情是不可能的。 web 浏览器的开发者故意这样做,以避免点击劫持的恶意行为。 您无法捕捉到进入 iframe 的点击。 您当前在桌面上所做的只是跟踪鼠标是否悬停在 iframe 上,而不是它是否被实际点击。 不幸的是,您甚至无法在移动设备上执行此操作,因为触摸屏上的触摸会自动传输到 iframe,因此没有“悬停”这样的概念,因为它适用于触摸屏。 很抱歉给你带来坏消息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.