How to check if IFrame is visible on page using jQuery

Question

Suppose I have a page with multiple IFrames :

Main Page

<div id='someDiv1' style='display:none; '>
       <iframe id='iframe1' src='iframe1.html'>
           <input id='someinput'></input>
       </iframe>
</div>

IFrame (iframe1.html)

<input id='someinput'></input>
<script>
  function isElementVisible(elem){

  }
</script>

In this scenario how do i check if the element is visible/hidden due to the parent div of IFrame hiding it?

I tried using $('#someinput').is(':visible') but I always get true if I run it inside IFrame. I don't have an option to change the page structure nor execute the script inside parent.

Solution 1

The document inside your iframe is not aware of the situation in your main page... But I believe you can just 'query' your parent to check if it's visible?

$('#someDiv1', window.parent.document).is(":visible");

or without jquery because you don't really need it..

if(window.parent.document.getElementById("someDiv1").style.display != "none") 
    alert("Visible");
else 
    alert("Hidden");

Solution 2

I am not sure if you can access the value/properties of an element within an iFrame I tried accessing the value but its gives "undefined"

Jquery try accessing value from iframe container

var isDivOpen = $("#someDiv1").is(":visible");
//for getting the state of the div : visible/hidden