javascript - 如何使用 touchstart 和 touchend 事件来跟踪移动设备上跨域 iframe 的点击
问题描述
我刚刚想出了如何在跨域 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>
解决方案
我不确定您为什么需要检查悬停或触摸。您只需检查单击并执行操作。
主要概念是通过分配从 iframe 中删除事件处理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>
推荐阅读
- mysql - XAMPP MySQL 突然无缘无故停止工作
- java - 如何在 postgres 中查询这个 JSONB 列?
- javascript - 未找到 node_modules/cypress/types
- reactjs - 从 ReactJS 的列表中选择特定元素
- java - 如何将 Integer 和 Long 类型与 Junit 进行比较?
- rust - 当我尝试加入恐慌线程时,“Err”中有什么?
- python - 如何删除包含除一列以外的特定字符的列?
- android - Android Retrofit:如何仅从 List 中获取少量数据并将其显示在 alertdialog 列表中?
- swiftui - 如何修复 ZStack 中的填充
- python - pygame中的上标不能写4?其他数字有效