admin管理员组

文章数量:1406144

I need to determine if an element in an iframe is visible on the screen. (if it is on the visible part of the screen) I mean the page can be very long and user must scroll to see the element

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>

How to write such a function isElementVisible()?

I need to determine if an element in an iframe is visible on the screen. (if it is on the visible part of the screen) I mean the page can be very long and user must scroll to see the element

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>

How to write such a function isElementVisible()?

  • javascript
  • html
  • iframe
Share Improve this question edited Mar 6, 2013 at 14:55 varan asked Mar 6, 2013 at 14:41 varanvaran 3542 gold badges13 silver badges30 bronze badges 1
  • Any news with this problem? – Sunyatasattva Commented Mar 10, 2013 at 0:37
Add a ment  | 

1 Answer 1

Reset to default 3

Here is an example of what you are trying to achieve.

Working example

Just the iframe

Basically, this is the function that should go inside your 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);
}

Trigger your checks with a scroll event handler.

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

This works assuming the iframe is in the same domain as the parent frame. I use jQuery for convenience.

本文标签： javascriptDetermine if an element in an iframe is visible on the screenStack Overflow

版权声明：本文标题：javascript - Determine if an element in an iframe is visible on the screen - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744976896a2635574.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。