检测iframe

Question

据我所知，如果是跨域，则无法判断用户在iframe中的行为。我想要做的是，如果点击iframe中的链接，则会在包含实际iframe的页面上显示div。

这实际上可行吗？

Answer 1

假设您只控制包含和框架的页面，您只想检查该框架内是否有任何链接，您可以监听框架＆＃39; s load事件。

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

不幸的是，如果无法访问框架，您无能为力。

另一方面，如果您同时控制框架的页面和包含该框架的页面（但它们位于不同的域上），只要符合{{}，就可以获得完全控制权。 {3}}

实施例

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

＆＃13;

＆＃13;

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);
});

＆＃13;

iframe {
  width: 100%;
}

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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