blocks|key|4425|text|iframes+(和frames)是它们自己的窗口，即使在iframes的情况下，它们看起来像是主文档窗口的一部分。所以，是的，为了引用主文档的窗口，它们应该使用parent+(或者window.parent，如果您希望更详细，但是更清晰)，因为它们是单独的对象。这在一定程度上是必要的，因为document中的许多内容最终都会作为包含window的属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4426|仔细想想，就会明白这一点：iframe的目的是在页面中嵌入独立来源的内容。如果主页和上面的iframe共享一个window对象，那么它们将共享全局上下文，并且很可能相互冲突。|4427|免费的live+example|4428|家长的HTML：|4429|I'm+the+parent+window
<iframe+width="500"+height="500"+src="http://jsbin.com/iyogir"></iframe>|code-block|syntax|javascript|4430|家长的JavaScript：|4431|function+foo()+{
++display("<code>foo</code>+called!");
}
function+display(msg)+{
++var+p+=+document.createElement('p');
++p.innerHTML+=+msg;
++document.body.appendChild(p);
}|4432|孩子的HTML：|4433|I'm+in+the+frame
<input+type='button'+id='theButton'+value='Click+Me'>|4434|孩子的JavaScript：|4435|window.onload+=+function()+{

++document.getElementById('theButton').onclick+=+function()+{
++++var+p+=+window.parent;
++++if+(!p)+{
++++++display("Can't+find+parent+window");
++++}
++++else+if+(typeof+p.foo+!==+"function")+{
++++++display("Found+parent+window,+but+can't+find+<code>foo</code>+function+on+it");
++++}
++++else+{
++++++display("Calling+parent+window's+<code>foo</code>+function.");
++++++p.foo();
++++}
++};

++function+display(msg)+{
++++var+p+=+document.createElement('p');
++++p.innerHTML+=+msg;
++++document.body.appendChild(p);
++}

};|4436|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ivimay^0|0|6|A|5|T|6|29|6|2J|D|42|8|4O|6|0|D|6|19|6|1J|6|0|3|C|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|J|3|K|5|6|7|20|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|21|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|22|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|23|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|24|8|@]|D|@]|E|$]]|$1|W|3|X|5|N|7|25|8|@]|D|@]|E|$O|P]]|$1|Y|3|Z|5|6|7|26|8|@]|D|@]|E|$]]|$1|10|3|11|5|N|7|27|8|@]|D|@]|E|$O|P]]|$1|12|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]]]

<code>iframe</code>s (and <code>frame</code>s) are their own windows, even though in the case of <code>iframe</code>s they look like they're part of the main document's window. So yes, to refer to the main document's window, they'd use <code>parent</code> (or <code>window.parent</code> if you want to be verbose, but clear), because they are separate objects. This is partially necessary because a lot of the things in <code>document</code> end up as properties on the containing <code>window</code>.

If you think about it, it makes sense: The purpose of an <code>iframe</code> is to embed independently-sourced content within the page. If the main page and the <code>iframe</code>(s) on it shared a single <code>window</code> object, they'd be sharing global context, and quite possibly conflicting with one another.

Gratuitous <a href="http://jsbin.com/ivimay" rel="noreferrer">live example</a>:

Parent's HTML:

<pre><code>&lt;p&gt;I'm the parent window&lt;/p&gt;
&lt;iframe width="500" height="500" src="http://jsbin.com/iyogir"&gt;&lt;/iframe&gt;
</code></pre>

Parent's JavaScript:

<pre><code>function foo() {
 display("&lt;code&gt;foo&lt;/code&gt; called!");
}
function display(msg) {
 var p = document.createElement('p');
 p.innerHTML = msg;
 document.body.appendChild(p);
}
</code></pre>

Child's HTML:

<pre><code>&lt;p&gt;I'm in the frame&lt;/p&gt;
&lt;input type='button' id='theButton' value='Click Me'&gt;
</code></pre>

Child's JavaScript:

<pre><code>window.onload = function() {

 document.getElementById('theButton').onclick = function() {
 var p = window.parent;
 if (!p) {
 display("Can't find parent window");
 }
 else if (typeof p.foo !== "function") {
 display("Found parent window, but can't find &lt;code&gt;foo&lt;/code&gt; function on it");
 }
 else {
 display("Calling parent window's &lt;code&gt;foo&lt;/code&gt; function.");
 p.foo();
 }
 };

 function display(msg) {
 var p = document.createElement('p');
 p.innerHTML = msg;
 document.body.appendChild(p);
 }

};
</code></pre>

blocks|key|3444375|text|window的概念与document捆绑在一起:每个document有一个window，每个window有一个document。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3444376|这意味着拥有自己document的<iframe>元素也有自己的window，就像弹出窗口或主导航窗口一样。|3444377|因此，您实际上必须使用window.parent来访问<iframe>元素的容器，就像您必须使用window.opener来访问弹出窗口的所有者一样。|3444378|EDIT:+window.parent和parent.window都是返回相同对象的有效表达式。这是因为window对象是脚本中的默认上下文(未限定名称被解析为window的成员)，而window对象有一个引用自身的window属性。|BOLD|3444379|因此，parent.window的计算结果是window.parent.window，它是与window.parent相同的对象。|3444380|也就是说，我确实更喜欢使用window.parent，以避免与额外的属性访问相关的(最小的)开销。|3444381|entityMap^0|0|6|A|8|Q|8|11|6|1A|6|1J|8|0|8|8|H|8|W|6|0|B|D|R|8|1C|D|0|0|5|6|D|K|D|1G|6|28|6|2K|6|30|6|0|3|D|M|K|1A|D|0|D|D|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1J|8|@$9|1K|A|1L|B|L]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1Y|8|@$9|1Z|A|20|B|C]|$9|21|A|22|B|C]|$9|23|A|24|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|25|8|@$9|26|A|27|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|R|$]]

The concept of <code>window</code> is tied to the <code>document</code>: There's one <code>window</code> per <code>document</code>, and one <code>document</code> per <code>window</code>.

That means <code>&lt;iframe&gt;</code> elements, which have their own <code>document</code>, also have their own <code>window</code>, just like a pop-up window or the main navigator window.

So, you'll indeed have to use <code>window.parent</code> to access the container of an <code>&lt;iframe&gt;</code> element, just like you have to use <code>window.opener</code> to access the owner of a pop-up window.

EDIT: Both <code>window.parent</code> and <code>parent.window</code> are valid expressions that return the same object. That's because the <code>window</code> object is the default context in scripting (unqualified names are parsed as members of <code>window</code>), and <code>window</code> objects have a <code>window</code> property that refers to themselves.

So, <code>parent.window</code> is evaluated as <code>window.parent.window</code>, which is the same object as <code>window.parent</code>.

That said, I do prefer using <code>window.parent</code>, to avoid the (minimal) overhead associated with the extra property access.

In Javascript, let's say we have a main page (<code>main.html</code>) which contains an <code>&lt;iframe&gt;</code> (<code>iframe.html</code>)

Now inside this <code>iframe.html</code>, if we need to refer to something on the main page (<code>main.html</code>)
, can we not just specify <code>window</code> instead of <code>parent.window</code>

If the answer is we need to write <code>parent.window</code>, I wanted to understand is there not a single <code>window</code> object reference for all the iframes within a main page..

While I do understand <code>document</code> is specific to individual iframes, but <code>window</code> should be common to all..Isn't it...Please help me in understanding the concept...

Also is there something <code>window.parent</code> as well ? If yes, how does it differ from <code>parent.window</code> ?

Javascript window object

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在Javascript中，假设我们有一个包含<iframe> (iframe.html)的主页(main.html)。现在在这个iframe.html中，如果我们需要引用主页上的内容(main.html)，我们能不能只指定window而不是parent.window如果答案是我们需要编写parent.window，我想...

问Javascript窗口对象
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript窗口对象EN