如何从 jQuery 访问框架（不是 iframe）内容答案

【问题标题】：How to access frame (not iframe) contents from jQuery如何从 jQuery 访问框架（不是 iframe）内容
【发布时间】：2011-02-24 16:53:09
【问题描述】：

我在这样的一页中有 2 个框架 (home.html)

<frameset rows="50%, 50%">
        <frame id="treeContent" src="treeContent.html" />
        <frame id="treeStatus"  src="treeStatus.html" />
</frameset>

然后在一帧中 (treeStatus.html) 我有类似的东西

<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>

我想从顶部窗口通过 jquery 操作位于子框架中的 div（例如显示和隐藏）。

我见过several questions like this，他们建议如下

$(document).ready(function(){

            $('#treeStatus').contents().find("#statusText").hide();
     });

我不知道这是否适用于 iframe，但在我有简单框架的情况下，它似乎不起作用。代码放在 home.html 中

这是萤火虫控制台的一些输出

>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]

那么如何从顶部框架访问框架元素？我在这里遗漏了什么吗？

回答

在这里结合两个答案后，正确的方法是

$('#statusText',top.frames["treeStatus"].document).hide();

为此，框架必须具有除 id 之外的 name 属性，如下所示：

<frameset rows="50%, 50%">
            <frame id="treeContent" src="treeContent.html" />
            <frame name="treeStatus" id="treeStatus"  src="treeStatus.html" />
    </frameset>

【问题讨论】：

请注意：当您可以使用position: fixed 始终在视口底部添加状态栏（或大小建议的日志）时，为什么要使用框架...支持古老的浏览器？
@alex 这只是我为 stackoverflow 创建的一个最小示例。实际应用完全不同。它比简单的状态栏更复杂。框架是必需的（不要问！）。
好的，不用担心。只是想我会补充一点（有些人不知道position: fixed）。
你的答案是我用过的，因为我被卡住了。你也需要写下你的答案，而不是评论。 HTH！

标签： javascript jquery html frame

【解决方案1】：

我成功使用了以下：

$(  '#foo',  top.frames['bar'].document  )

（也适用于自动附加在top.frames 中的嵌套框架）

【讨论】：

【解决方案2】：

对于纯 jquery 解决方案（不需要top.frames 等），以下似乎可行：

$('some selector for item from frame' ,$('frame selector')[0].contentDocument)

这具有适用于嵌套框架的优点：

$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)

【讨论】：

【解决方案3】：

https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/

    $(document).ready(function(){
     $("#Button1").click(function(){
      $(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
     });
    });

但我用过：

    $.post("content_right.php",{id:id},function(data)
     $(parent.frames["content_right"].document.body).html(data) ;
    });

【讨论】：

【解决方案4】：

我有嵌套的框架。就我而言，为了让它工作，我使用了命令：

var statusText = 
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");

然后，正如查尔斯已经回答的那样，您可以通过 jQuery 做任何您想做的事情：

$(statusText).whatever();

【讨论】：

contentDocument 是我要找的！我也有嵌套框架，感谢这篇文章！

【解决方案5】：

您可以抓取您想要操作的 Frame 和 div 并将其传递给变量。

var statusText = top.frames["treeStatus"].document.getElementById('statusText');

然后你可以通过 jQuery 为它做任何你想做的事情。

$(statusText).whatever();

虽然有时您无法避免不得不使用框架，但请记住，<frame> 标记在 HTML5 中已过时。如果您计划升级到 HTML5，则必须使用 iFrame。

【讨论】：

不完全是我想要的，因为我相信 jQuery 的全部目的是避免 getElementById。但是你的回答帮助我做了我想做的事，所以我接受了。