确定是否在iframe元素是在屏幕上可见(Determine if an element in an

2019-07-21 02:50发布

我需要确定是否在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()?

Answer 1:

这里是你想达到什么样的一个例子。

工作实例

就在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为了方便。



文章来源: Determine if an element in an iframe is visible on the screen