iframe内の要素が画面に表示されているかどうかを確認する

iframeの要素が画面に表示されているかどうかを判断する必要があります。（それは、画面の可視部分にある場合）私は、ページが非常に長くなることを意味し、ユーザーが要素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（）？

出典

2013-03-06 varan

この問題のニュースはありますか？ – Sunyatasattva

ここでは、達成しようとしているものの例を示します。と

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

トリガー小切手：

Working example

は基本的に

Just the iframe、これはあなたのiframeの内側に行くべき関数でありますスクロールイベントハンドラ。

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

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

出典

2013-03-06 15:13:48 Sunyatasattva

ソリューションありがとうございました – varan

複数のzインデックスを扱うのはどうですか？例えば、zIndexが異なる3つのiFramesがほぼ同じ位置にあるとします。そのうちの1つが他の2つをブロックしているとどのように判断しますか？ – Elijah

'z-index'プロパティをjQueryでチェックし、関数内の位置と' display'か 'visibility'を確認することができます。コードが少し難解だとは思わないが、おそらくあなた自身の質問を投稿してここにリンクを投稿することができます。 – Sunyatasattva

iframe内の要素が画面に表示されているかどうかを確認する

答えて

関連する問題