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

Question

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

28

我在一个页面中有两个框架，就像这样（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（例如显示和隐藏）。

我看过类似这些问题和文章，他们提出了以下建议：

$(document).ready(function(){

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

我不知道这是否适用于iframes，但在我的情况下，我有简单的frames似乎不起作用。代码位于home.html内。

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

>>> $('#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>

- kazanaki

只是一点提示：为什么要使用框架，当你可以使用“position: fixed”将状态栏（或根据大小建议的日志）始终添加到视口底部...支持古老的浏览器？ - alex

@alex 这只是我为stackoverflow创建的一个最小示例。真正的应用程序完全不同。它比简单的状态栏更复杂。框架是必需品（别问为什么！）。 - kazanaki

没问题，我只是想补充一下（有些人可能不知道position: fixed）。 - alex

你的回答是我在卡住时使用的。你也需要把你的答案写下来，而不是留下评论。希望对你有所帮助！ - James Drinkard

5个回答

5

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

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

接着，就像Charles已经回答的那样，你可以通过jQuery对它进行任何操作：

$(statusText).whatever();

- user2100764

contentDocument就是我一直在寻找的！我也有嵌套框架，感谢您的帖子！ - NetWave

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

- Ionut Catalin Badea

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)

- bacar

0

我成功使用了以下内容：

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

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

- Andreas Covidiot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charles Caldwell · Accepted Answer

你可以获取要操作的Frame和div并将其传递到一个变量中。

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

然后，您可以通过jQuery对其执行任何操作。

$(statusText).whatever();

尽管有时候你无法避免使用框架，但要记住 <frame> 标签已经在 HTML5 中被废弃。如果你计划升级到 HTML5，那么就必须使用 iFrames。