js如何监听iframe内的点击事件（注意是同源的情况）

一、前言

在开发过程中，也许会遇到一些需要给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通信