移动端同源Iframe内如何追踪另一同源Iframe的点击事件？

当然可以实现！因为两个Iframe都是同源的（协议、域名、端口完全一致），浏览器允许它们之间进行DOM交互和事件监听，这完全符合同源策略的规则。下面是适配你场景的具体实现方案：

核心思路 #

由于处于同源环境，你可以直接访问目标Iframe的内部DOM，并给它绑定点击事件监听。考虑到移动端的交互特性，我们可以同时处理click和touchstart事件（后者可以优化部分场景下的点击延迟问题）。

具体代码实现 #

在你所在的a-sourceful-one Iframe内的this-is-my-executing-script脚本中，添加以下代码：

// 1. 获取目标Iframe元素（你提到该元素可直接访问）
const targetIframe = document.getElementById('track-clicks-within-this-frame-for-mobiles');

// 2. 等待目标Iframe加载完成，避免未就绪时无法访问内部DOM
targetIframe.addEventListener('load', () => {
  // 3. 获取目标Iframe的内部document对象
  // 兼容不同浏览器的写法：contentDocument 或 contentWindow.document
  const iframeInnerDoc = targetIframe.contentDocument || targetIframe.contentWindow.document;

  // 4. 绑定点击事件监听（覆盖大部分移动端交互场景）
  iframeInnerDoc.addEventListener('click', (event) => {
    // 这里编写你的追踪逻辑，比如记录点击元素、上报数据等
    console.log('移动端点击了目标Iframe内的元素:', event.target);
    // 示例：上报点击的元素ID
    if (event.target.id) {
      // trackEvent('iframe_click', event.target.id);
    }
  });

  // 可选：补充touchstart事件监听，优化低版本移动端浏览器的点击延迟
  iframeInnerDoc.addEventListener('touchstart', (event) => {
    // 注意：touchstart会在click之前触发，若需避免重复处理可添加判断逻辑
    console.log('移动端触摸事件触发:', event.target);
  });
});

关键注意事项 #

• 同源验证：必须确保两个Iframe的协议、域名、端口完全一致，否则浏览器会阻止跨域DOM访问，导致代码报错。
• 加载时机：一定要等待目标Iframe的load事件触发后再绑定监听，否则contentDocument可能为null，无法获取内部DOM。
• 事件委托优势：直接在document层面绑定监听，即使目标Iframe内部有动态生成的元素，依然能捕获到点击事件，无需重新绑定。

内容的提问来源于stack exchange，提问作者Sahil Maniar