如何检测 iframe 中的 HTML 元素是否在 Chrome 中呈现答案

【问题标题】：How to detect if an HTML element in an iframe is rendered in Chrome如何检测 iframe 中的 HTML 元素是否在 Chrome 中呈现
【发布时间】：2017-12-23 13:59:08
【问题描述】：

背景：我有一个网站，它在服务器 B 上运行了多个选项卡。其中一个选项卡包含一个 iframe，它正在加载一个基于 Angularjs 的站点，该站点在单独的服务器（服务器 A）上运行。该站点每 10 秒刷新一次部分，以检查其他地方所做的更改。当不在该选项卡上时，我想阻止这些呼叫。我需要找到一种方法来检测页面是否被呈现，如果它不是来自服务器 A 内的调用，则阻止调用。

目前的解决方案：在 Firefox 中，我在一个元素上使用 getBoundingClientRect().top 来完成这项工作。当加载另一个选项卡时，该值会发生变化，因此可以检查它并阻止调用。不过，这在 Chrome 中不起作用。交换标签时该值不会改变。

有人对此有任何建议或经验吗？需要一个适用于所有浏览器的解决方案。

【问题讨论】：

Detect If Browser Tab Has Focus的可能重复
您可以在 Chrome、Chromium 中使用 window.location.ancestorOrigins 在 Firefox 中使用 document.domain，请参阅 Foolproof way to detect if this page is INSIDE a cross-domain iframe
Is there a way to detect if a browser window is not currently active?的可能重复

标签： javascript angularjs

【解决方案1】：

感谢您的建议。

使用以下方法修复此问题： parent.document.getElementsByTagName('iframe')[0].getBoundingClientRect().top

在所有浏览器中，当 iframe 不再位于活动页面上时，此值会发生变化。

【讨论】：