简体繁体 English

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

[英]How to detect if an HTML element in an iframe is rendered in Chrome

原文 2017-07-18 15:30:16 2 1 javascript/ angularjs

Background: I have a website that has multiple tabs running on server B. One of these tabs contains an iframe that is loading an Angularjs based site that is running on a separate server (server A). 背景：我有一个网站，其中有多个选项卡在服务器B上运行。这些选项卡之一包含一个iframe，该iframe正在加载在单独的服务器（服务器A）上运行的基于Angularjs的网站。 The site refreshes sections every 10 seconds to check for changes made elsewhere. 该网站每10秒刷新部分，以检查其他地方所做的更改。 When not on that tab, I want to block these calls. 如果不在该选项卡上，我想阻止这些呼叫。 I need to find a way to detect whether the page is rendered and block the calls if it is not from within the server A. 我需要找到一种方法来检测页面是否已呈现，如果不是来自服务器A内的页面，则阻止该调用。

Current solution: In Firefox I have got this working using getBoundingClientRect().top on an element. 当前解决方案：在Firefox中，我已经使用getBoundingClientRect（）。top在元素上进行此工作。 The value changes when another tab is loaded so can check it and block the calls. 加载另一个选项卡时，该值会更改，因此可以检查它并阻止呼叫。 This doesn't work in Chrome though. 不过，这在Chrome中不起作用。 The value doesn't change when swapping tabs. 交换标签时，该值不变。

Does anyone have any suggestions or experience with this? 有人对此有任何建议或经验吗？ Need a solution that will work in all browsers. 需要一种适用于所有浏览器的解决方案。

1 个解决方案

Thank you for the suggestions. 感谢您的建议。

Fixed this using: parent.document.getElementsByTagName('iframe')[0].getBoundingClientRect().top 使用以下方法解决了此问题：parent.document.getElementsByTagName（'iframe'）[0] .getBoundingClientRect（）。top

In all browsers this value changes when the iframe is no longer on the active page. 在所有浏览器中，当iframe不在活动页面上时，此值都会更改。