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

Posted 2023-03-06

【中文标题】如何使用 jQuery 检查 IFrame 在页面上是不是可见

【英文标题】：How to check if IFrame is visible on page using jQuery如何使用 jQuery 检查 IFrame 在页面上是否可见

【发布时间】：2014-08-23 03:44:55

【问题描述】：

假设我有一个包含多个 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 中运行它，我总是会得到正确的结果。我没有更改页面结构的选项，也没有在父级中执行脚本。

【问题讨论】：

纯 javascript var is_hidden = parent.document.getElementById("iframe1").parentNode.style.display == "none"; alert(is_hidden ? "I am hidden" : "I am visible");

Testing if something is hidden, using jQuery的可能重复

不是真正的重复。请阅读我的完整问题。

它的原生 JS，你写的每一行代码都不需要 Jquery。

【参考方案1】：

您 iframe 中的文档不知道您主页中的情况...但我相信您可以“查询”您的父母以检查它是否可见？

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

或者没有 jquery，因为你真的不需要它..

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

【讨论】：

如果 IFRAME 来自其他域而不是父文档，这会起作用吗？

@Gacek 提出，如果

【参考方案2】：

我不确定您是否可以访问 iFrame 中元素的值/属性 我尝试访问该值，但它给出了“undefined”

Jquery try accessing value from iframe container

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

【参考方案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>

【讨论】：

感谢您的回答，但我无法修改文档。