检测 iFrame 中的元素是不是在客户端视图中
Posted
技术标签:
【中文标题】检测 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;" >
Menu
</div>
<iframe src="https://***.com/" >
</body>
</html>需要在 IE 中工作
【问题讨论】：
iframe的文档在同一个域？如果是这样，您可以简单地使用 IntersectionObserver。 @Kaiido 同域，但我需要使用 IE，所以 IntersectionObserver 不工作。 这些是您的问题中应该包含的信息。此外，明确说明 IE 是否是您的主要目标，或者您是否只需要为某些客户提供支持。因为如果超过 50% 的用户没有使用 IE，则应该为他们使用 IntersectionObserver，因为它比任何解决方法（即“它保存树木”）都更有效，并且该解决方法只能应用于 IE用户。 @Kaiido 哦，是的，我的错！在我的具体情况下，我 100% 的用户使用 IE。 【参考方案1】：如果IntersectionObserver 有效并且你想在IE 中支持它，你可以使用this polyfill。该库在不支持的浏览器中填充原生 IntersectionObserver API，并支持 IE 7+。
【讨论】：
声音处理，测试一下！以上是关于检测 iFrame 中的元素是不是在客户端视图中的主要内容，如果未能解决你的问题，请参考以下文章
在 magnolia 的页面详细信息视图中检测 iframe 的变化