javascript - 检测 iframe 中的点击

Question

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

这真的可能吗？

Answer 1

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

显然它不是 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>