Javascript 确定iframe中的元素是否在屏幕上可见_Javascript_Html_Iframe

Javascript 确定iframe中的元素是否在屏幕上可见

javascript html iframe

Javascript 确定iframe中的元素是否在屏幕上可见,javascript,html,iframe,Javascript,Html,Iframe,我需要确定iframe中的元素在屏幕上是否可见。（如果在屏幕的可见部分）我的意思是页面可能很长，用户必须滚动才能看到元素 index.html： <html> ... ... <iframe src="iframe.html" /> ... ... </html> ... ... ... ... iframe.html： <html> ... ... <div id="element"></div> .... ...

我需要确定iframe中的元素在屏幕上是否可见。（如果在屏幕的可见部分）我的意思是页面可能很长，用户必须滚动才能看到元素

index.html：

<html>
...
...
<iframe src="iframe.html" />
...
...
</html>


...
...
...
...

iframe.html：

<html>
...
...
<div id="element"></div>
....
...
<script type="text/javascript">
    var el = document.getElementById('element');
    if (isElementVisible(el)) {
      // do something
    }
</script>
</html>


...
...
....
...
var el=document.getElementById（'element'）；
如果（isElementVisible（el））{
//做点什么
}

如何编写这样的函数isElementVisible（）

这是一个你想要实现的目标的例子

基本上，这是应该放在

iframe

中的函数：

function isElementVisible(element)
{
    var elementPosition = element.offset().top;
    var currentScroll = window.parent.$("iframe").contents().scrollTop();
    var screenHeight = window.parent.$("iframe").height();
    var visibleArea = currentScroll + screenHeight;
    return (elementPosition < visibleArea);
}

假设iframe与父帧位于同一个域中，则可以这样做。为了方便起见，我使用了jQuery。

这个问题有什么新消息吗？谢谢你的解决方案处理多个zindex怎么样？假设您有3个iFrame位于大致相同的位置，具有不同的zindex-如何确定其中一个正在阻止另外两个？您可以使用jQuery检查

z-index

属性，检查位置和函数中的

显示

或

可见性

。在没有看到代码的情况下，回答起来有点困难，也许你可以发布你自己的问题并在这里发布一个链接，这样我就可以看一看了。

$(window).scroll(function(){
if( isElementVisible( element ) )
   // Perform your code.
});