Javascript 如何从 jQuery 访问框架（不是 iframe）内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2921957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access frame (not iframe) contents from jQuery
提问by kazanaki
I have 2 frames in one page like this (home.html)
我在这样的一页中有 2 个框架（home.html）
<frameset rows="50%, 50%">
<frame id="treeContent" src="treeContent.html" />
<frame id="treeStatus" src="treeStatus.html" />
</frameset>
and then in one frame (treeStatus.html) I have something like
然后在一帧（treeStatus.html）中我有类似的东西
<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>
I want from the top window to manipulate the div located in the child frame via jquery (e.g show and hide).
我想从顶部窗口通过 jquery（例如显示和隐藏）操作位于子框架中的 div。
I have seen severalquestionslikethisand they suggest the following
$(document).ready(function(){
$('#treeStatus').contents().find("#statusText").hide();
});
I do not know if this works with iframes but in my case where I have simple frames it does not seem to work. The code is placed inside home.html
我不知道这是否适用于 iframe，但在我有简单框架的情况下，它似乎不起作用。代码放在 home.html 里面
Here is some output from firebug console
这是萤火虫控制台的一些输出
>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]
So how do I access frame elements from the top frame? Am I missing something here?
那么如何从顶部框架访问框架元素呢？我在这里错过了什么吗？
Answer
回答
After combining both answers here, the correct way is
在这里结合两个答案后，正确的方法是
$('#statusText',top.frames["treeStatus"].document).hide();
For this to work the frame must have the nameattribute apart from the id, like this:
为此，框架必须具有除 id 之外的name属性，如下所示：
<frameset rows="50%, 50%">
<frame id="treeContent" src="treeContent.html" />
<frame name="treeStatus" id="treeStatus" src="treeStatus.html" />
</frameset>
采纳答案by Charles Caldwell
You could grab the Frame and div you are wanting to manipulate and pass it into a variable.
您可以获取要操作的 Frame 和 div 并将其传递给变量。
var statusText = top.frames["treeStatus"].document.getElementById('statusText');
Then you can do anything you want to it through jQuery.
然后你可以通过jQuery做任何你想做的事情。
$(statusText).whatever();
Though sometimes you just can't get around having to use frames, keep in mind that the <frame>tag is obsoleted in HTML5. If you ever plan on moving up to HTML5, you'll have to use iFrames.
尽管有时您无法避免使用框架，但请记住，该<frame>标签在 HTML5 中已过时。如果您打算升级到 HTML5，则必须使用 iFrame。
回答by user2100764
I have nested frames. In my case, to make it work i used command:
我有嵌套框架。就我而言，为了使其工作，我使用了命令：
var statusText =
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");
Then, as Charles already answered, you can do anything you want to it through jQuery:
然后，正如查尔斯已经回答的那样，你可以通过 jQuery 做任何你想做的事情：
$(statusText).whatever();
回答by RoToRa
You need to supply a reference to the frame you what to access:
您需要提供对要访问的框架的引用：
$("some selector", top.frames["treeStatus"]))
回答by Ionut Catalin Badea
https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/
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!');
});
});
But I used :
但我用过：
$.post("content_right.php",{id:id},function(data)
$(parent.frames["content_right"].document.body).html(data) ;
});
回答by bacar
For a pure jquery solution (that doesn't require top.framesetc), the following seems to work:
对于纯 jquery 解决方案（不需要top.frames等），以下似乎有效：
$('some selector for item from frame' ,$('frame selector')[0].contentDocument)
This has the advantage that it works for nested frames:
这具有适用于嵌套框架的优点：
$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)
