How to check if iFrame is displayed on page using jQuery

Question

Suppose I have a page with several IFrames:

Home 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 case, how to check if an element is visible / hidden due to its parent IFAM div hiding it?

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

Answer 1

iframe ... , "" , , ?

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

jquery, .

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

Answer 2

, / iFrame , "undefined"

Jquery iframe

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

Answer 3

URL parameters are your friend.

in iframe1.html put this at the top:

<script>

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    var test = getUrlVars();
    console.log(test[0]);

</script>

and for your main page use:

<div id='someDiv1' style='display:none; '>
    <iframe id='iframe1' src='iframe.html?visible=yes'>

    </iframe>
</div>