我在一个页面中有 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里面
这是 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>
最佳答案
您可以抓取您想要操作的 Frame 和 div 并将其传递到变量中。
var statusText = top.frames["treeStatus"].document.getElementById('statusText');
然后你可以通过 jQuery 做任何你想做的事情。
$(statusText).whatever();
尽管有时您无法避免使用框架,但请记住 <frame>
标签在 HTML5 中已被废弃。如果您计划升级到 HTML5,则必须使用 iFrame。
关于javascript - 如何从 jQuery 访问框架(非 iframe)内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14054349/