【问题标题】：Detecting a click in an iframe检测 iframe 中的点击
【发布时间】：2017-12-01 13:50:01
【问题描述】：

我了解，如果 iframe 是跨域的，则无法判断用户在 iframe 中正在做什么。我想要做的是，如果点击 iframe 内的链接，则会在包含实际 iframe 的页面上出现一个 div。

这真的可能吗？

【问题讨论】：

所以你是说有问题的 iframe 不是跨域的？
跨域
试用解决方案here
没有。由于您已经说明的原因，这是不可能的
通过查看 iframe 是否有焦点似乎可以检测到点击事件，但您无法分辨用户在跨域 iframe 中点击了哪个元素。

标签： javascript jquery iframe

【解决方案1】：

假设您只控制一个包含框架的页面并且您只想检查该框架内的任何链接是否被点击，您可以监听框架的load事件。

显然它不是 100% 可靠的。对于初学者，您不知道点击了哪个链接。它不适用于指向#hashes（在同一页面上）的链接。最后，您无法区分页面重新加载和地址更改。

很遗憾，如果无法访问框架，您将无能为力。

另一方面，如果您同时控制框架的页面和包含该框架的页面（但它们位于不同的域中），则您可以获得完全控制权，只要您符合 Same-origin policy。

示例

这是一个过于复杂（外观：D）的示例：

var frame = document.querySelector('iframe'),
    indicator = document.querySelector('#frame-state'),
    ignoreFirstLoad = true,
    timeout = null;
    
frame.addEventListener('load', function() {
  if (ignoreFirstLoad) {
    ignoreFirstLoad = false;
    return;
  }
  
  // some link was clicked or frame was reloaded
  indicator.classList.add('loaded');
  clearTimeout(timeout);

  timeout = setTimeout(function() {
    indicator.classList.remove('loaded');
  }, 1000);
});

iframe {
  width: 100%;
}

#frame-state {
  opacity: 0;
  transition: opacity 2s;
  
  font-weight: bold;
}

#frame-state.loaded {
  opacity: 1;
  transition: opacity .2s;
}

<p>Click on any link inside the frame: <span id="frame-state">Loaded!</span></p>

<iframe src="https://en.m.wikipedia.org/"></iframe>

【讨论】：

【解决方案2】：

如果您可以访问这两个代码库。然后您可以使用 postMessage API 在 iFrame 和父页面之间进行通信。

【讨论】：