一、前言
在开发过程中,也许会遇到一些需要给iframe内的点击绑定事件的操作,例如页面中引入了一些平台广告(广告一般是iframe的形式引入到页面),在点击广告后需要做一些别的操作(埋点数据搜集向后台上报数据),但由于同源策略的影响,这个实现并非像添加监听器那么简单。本文将提供如何实现这个功能的一些思路。
二、获取iframe节点
不管使用框架还是原生js,首先都需要获取到这个iframe节点,在此介绍几个对于iframe的操作:
// 获取 iframe 元素
const iframe = document.querySelector('iframe'); // 或者使用 document.getElementById('iframe-id-name');
// 访问 iframe 内的文档
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 查询 iframe 内的节点
const targetNode = iframeDocument.querySelector('.your-class'); // 替换为你要查找的节点选择器
// 操作节点,例如获取节点内容
console.log(targetNode.textContent);
三、给iframe的文档内容添加监听器
例如要获取iframe内的点击相对于主页面的点击坐标点,可以这样实现:
try {
iframeDoc.addEventListener('click', function(event) {
// 获取iframe节点相对于主页面视口的元素位置和尺寸信息
const rect = iframe.getBoundingClientRect();
// 此处的event事件是相对于iframe页面的而不是主页面的,所以坐标点需要加上iframe节点距离主页面视口坐标及顶部的距离以及主页面滚动的距离
const pageX = rect.left + window.pageXOffset + event.pageX;
const pageY = rect.top + window.pageYOffset + event.pageY;
console.log(`坐标点为:(${pageX},${pageY})`)
// 上报数据或其他操作
// ...
} catch (error) {
console.error(error);
}
}
四、注意
1、一般点击广告等iframe会跳转页面,如果此时上报数据会因页面跳转而打断,如果有这个需求,可以使用navigator.sendBeacon来发送数据
2、非同源的情况无法获取iframe的contentWindow或contentDocument,可以尝试使用postMessage通信