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

var*_*ran 7 html javascript iframe

我需要确定iframe中的元素是否在屏幕上可见.(如果它在屏幕的可见部分)我的意思是页面可能很长,用户必须滚动才能看到该元素

index.html的:

<html>
...
...
<iframe src="iframe.html" />
...
...
</html>
Run Code Online (Sandbox Code Playgroud)

Iframe.html的:

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

如何编写这样的函数isElementVisible()?

Sun*_*tva 3

这是您想要实现的目标的示例。

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);
}
Run Code Online (Sandbox Code Playgroud)

使用滚动事件处理程序触发您的检查。

$(window).scroll(function(){
if( isElementVisible( element ) )
   // Perform your code.
});
Run Code Online (Sandbox Code Playgroud)

假设 iframe 与父框架位于同一域中,则此操作有效。为了方便起见,我使用jQuery