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中的文档不知道主页中的情况...但我相信您只能查询＆＃39;你的父母要检查它是否可见？

$('#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 try accessing value from iframe container

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>

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

3 个答案: