Question

我在这样的一个页面中有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（例如show and hide）。

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

$(document).ready(function(){

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

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

中

以下是来自firebug控制台的一些输出

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

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

答案

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

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

为此，框架必须具有 name 属性，而不是id，如下所示：

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

Answer 1

你可以抓住Frame和div，你想要操纵它并将它传递给变量。

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

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

$(statusText).whatever();

虽然有时您无法使用框架，但请记住，<frame>标记已在HTML5中废弃。如果您打算升级到HTML5，则必须使用iFrame。

Answer 2

您需要提供对您要访问的框架的引用：

$("some selector", top.frames["treeStatus"]))

Answer 3

我有嵌套的框架。在我的情况下，为了使它工作我使用命令：

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

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

$(statusText).whatever();

Answer 4

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) ;
    });

Answer 5

对于纯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)

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

5 个答案: