確定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 2013-03-10 00:37:46

以下是您試圖實現的一個示例。

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-06 15:13:48 Sunyatasattva

感謝您的解決方案 – varan 2013-03-11 13:43:05

如何處理多個zIndex？假設您有三個iFrames，大致位於不同zIndexes的相同位置 - 您如何確定其中一個屏蔽了另外兩個？ – Elijah 2013-11-10 17:57:10

您可以使用jQuery檢查'z-index'屬性，檢查函數中的位置和'display'或'visibility'。沒有看到代碼有點難以回答，也許你可以發佈你自己的問題，並在這裏發佈鏈接，所以我可以看看。 – Sunyatasattva 2013-11-10 18:28:23

確定iframe中的元素是否在屏幕上可見

回答

相關問題