如何使用jQuery检查IFrame是否在页面上可见

Question

假设我有一个包含多个IFrame的页面：

主页

<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>

在这种情况下，我如何检查元素是否可见/隐藏由于IFrame的父div隐藏它？

我尝试使用$（'＃someinput'）。is（'：visible'）但如果我在IFrame中运行它，我总是会成功。 我没有选项来更改页面结构，也没有在父内部执行脚本。

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

网址参数是你的朋友。

在iframe1.html中将它放在顶部：

<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>

并为您的主页使用：

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

    </iframe>
</div>