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

2018-06-03 14:08:37

我需要确定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（）？

这是你正在努力实现的一个例子。

工作示例

只是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 。

链接地址: http://www.djcxy.com/p/12123.html

上一篇: Determine if an element in an iframe is visible on the screen

下一篇: Updating address bar with new URL without hash or reloading the page