代码之家 › 专栏 › 技术社区 › kazanaki

如何从jquery访问帧(而不是iframe)内容

frame html jquery javascript

kazanaki · 技术社区 · 14 年前

像这样一页有两帧( 首页 )

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

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

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

我希望从顶部窗口通过jquery(例如show和hide)操作子框架中的DIV。

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

$(document).ready(function(){

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

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

这里是Firebug控制台的一些输出

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

那么如何从顶部框架访问框架元素呢?我是不是错过了什么?

回答

将两个答案组合在一起后,正确的方法是

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

要使此工作,框架必须具有名称除ID之外的属性,如下所示:

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

5 回复 | 直到 9 年前

Charles Caldwell 14 年前

您可以抓取想要操作的框架和DIV,并将其传递到变量中。

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

然后,您可以通过jquery做任何您想做的事情。

$(statusText).whatever();

尽管有时你不能摆脱使用框架的困扰,但请记住 <frame> 标签在HTML5中已过时。如果你计划升级到HTML5,你必须使用iframes。

RoToRa 14 年前

您需要提供对要访问的帧的引用:

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

user2100764 12 年前

我有嵌套框架。在我的例子中,为了使它工作,我使用了命令:

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

然后,正如查尔斯已经回答的那样,您可以通过jquery执行任何您想要的操作:

$(statusText).whatever();

Ionut Catalin Badea 9 年前

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

bacar 9 年前

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