7

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() の書き方は?

4

1 に答える 1

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);
}

スクロール イベント ハンドラーでチェックをトリガーします。

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

これは、iframe が親フレームと同じドメインにあると仮定して機能します。便宜上jQueryを使用します。

于 2013-03-06T15:13:48.110 に答える