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

我需要确定iframe中的元素是否在屏幕上可见。（如果是在屏幕的可见部分）我指的是页面可以很长，用户必须滚动才能看到的元素确定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>

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

来源

2013-03-06 varan

这个问题的任何消息？ – Sunyatasattva 2013-03-10 00:37:46

以下是您试图实现的一个示例。

Working example

Just the iframe

基本上，这是应该去你的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); 
}

触发检查有滚动事件处理器。

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

这个假设iframe与父框架位于同一个域中。为了方便，我使用jQuery。

来源

2013-03-06 15:13:48 Sunyatasattva

感谢您的解决方案 – varan 2013-03-11 13:43:05

如何处理多个zIndex？假设您有三个iFrames，大致位于不同zIndexes的相同位置 - 您如何确定其中一个屏蔽了另外两个？ – Elijah 2013-11-10 17:57:10

您可以使用jQuery检查'z-index'属性，检查函数中的位置和'display'或'visibility'。没有看到代码有点难以回答，也许你可以发布你自己的问题，并在这里发布链接，所以我可以看看。 – Sunyatasattva 2013-11-10 18:28:23

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

回答

相关问题