检测 iFrame 中的元素是否在客户端视图中答案

【问题标题】：Detect if element in iFrame is in Client-View检测 iFrame 中的元素是否在客户端视图中
【发布时间】：2021-05-24 10:43:17
【问题描述】：

我想检测<iframe> 中的元素是否在主框架的客户端视图中。

Example

我面临的问题是，<iFrame> 的元素始终在视图中。但我无法检测到元素是否在主框架的视图中。

在此示例中，认为元素 (Div) 位于像素 2500。如果元素在视图中，我想从 <iframe> 外部进行检测

<html>
<body>
<div style="background-color: red;" width="100%">
Menu
</div>
<iframe src="https://stackoverflow.com/" width="100%" height="3000px">
</body>
</html>

需要在 IE 中工作

【问题讨论】：

iframe的文档在同一个域？如果是这样，您可以简单地使用 IntersectionObserver。
@Kaiido 同域，但我需要使用 IE，所以 IntersectionObserver 不工作。
这些是您的问题中应该包含的信息。此外，明确说明 IE 是否是您的主要目标，或者您是否只需要为某些客户提供支持。因为如果超过 50% 的用户没有使用 IE，则应该为他们使用 IntersectionObserver，因为它比任何解决方法（即“它保存树木”）都更有效，并且该解决方法只能应用于 IE用户。
@Kaiido 哦，是的，我的错！在我的具体情况下，我 100% 的用户使用 IE。

标签： javascript html jquery internet-explorer iframe

【解决方案1】：

如果IntersectionObserver 有效并且你想在IE 中支持它，你可以使用this polyfill。该库在不支持的浏览器中填充原生 IntersectionObserver API，并支持 IE 7+。

【讨论】：

声音处理，测试一下！