如何从JavaScript访问父级Iframe

那么,我有一个IFrame,它调用一个相同的域名页面。 我的问题是,我想从这个被称为页面(从JavaScript)访问这个父母Iframe的一些信息。 我怎样才能访问这个iframe?

详细信息:有几个像这样的Iframe,可以加载相同的页面,因为我正在编程一个Windows环境。 我打算closures这个Iframe,这就是为什么我需要知道我应该从他内部closures。 我有一个数组保持对这些Iframes的引用。

编辑:有iframesdynamic生成

您也可以将名称和ID设置为相同的值

<iframe id="frame1" name="frame1" src="any.html"></iframe> 

所以你将能够使用子页面内的下一个代码

 parent.document.getElementById(window.name); 

只需从框架页面调用window.frameElement 。 如果页面不在框架中,则frameElement将为null

另一种方式(获取框架内的窗口元素不是微不足道的),但为了完整性:

 /** * @param f, iframe or frame element * @return Window object inside the given frame * @effect will append f to document.body if f not yet part of the DOM * @see Window.frameElement * @usage myFrame.document = getFramedWindow(myFrame).document; */ function getFramedWindow(f) { if(f.parentNode == null) f = document.body.appendChild(f); var w = (f.contentWindow || f.contentDocument); if(w && w.nodeType && w.nodeType==9) w = (w.defaultView || w.parentWindow); return w; } 

我会build议使用postMessage API 。

在你的iframe中,调用:

 window.parent.postMessage({message: 'Hello world'}, 'http://localhost/'); 

在包含iframe的页面中,您可以监听像这样的事件:

 window.addEventListener('message', function(event) { if(event.origin === 'http://localhost/') { alert('Received message: ' + event.data.message); } else { alert('Origin not allowed!'); } }, false); 

顺便说一下,也可以对其他窗口进行调用,而不仅仅是内部框架。

在这里阅读John Resigs博客上关于postMessage API的更多信息

老问题,但我只是有这个相同的问题,并find了一种方法来获取iframe。 这仅仅是通过遍历父窗口的frames []数组,并在运行代码的窗口中testing每个框架的contentWindow。 例:

 var arrFrames = parent.document.getElementsByTagName("IFRAME"); for (var i = 0; i < arrFrames.length; i++) { if (arrFrames[i].contentWindow === window) alert("yay!"); } 

或者,使用jQuery:

 parent.$("iframe").each(function(iel, el) { if(el.contentWindow === window) alert("got it"); }); 

这种方法可以节省分配一个ID到每个iframe,这是你的情况,因为它们是dynamic创build的。 我找不到一个更直接的方法,因为你不能使用window.parent获取iframe元素 – 它直接到父窗口元素(跳过iframe)。 因此循环看起来是唯一的方法,除非你想使用ID。

你可以使用parent来访问父页面。 所以访问一个函数将是:

 var obj = parent.getElementById('foo'); 

一旦设置了iframe的id,您可以从内部文档访问iframe,如下所示。

 var iframe = parent.document.getElementById(frameElement.id); 

适用于IE,Chrome和FF。

也许只是使用

 window.parent 

到你的iframe来获取调用框架/窗口。 如果你有多个呼叫帧,你可以使用

 window.top 

试试这个,在你的父框架中设置你这样的IFRAME:

 <iframe id="frame1" src="inner.html#frame1"></iframe> <iframe id="frame2" src="inner.html#frame2"></iframe> <iframe id="frame3" src="inner.html#frame3"></iframe> 

请注意,每个帧的id作为src中的一个锚点传递。

那么在你的内部html中,你可以通过location.hash访问它加载的框架的id:

 <button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button> 

那么您可以访问parent.document.getElementById()来访问iframe中的iframe标签

 // just in case some one is searching for a solution function get_parent_frame_dom_element(win) { win = (win || window); var parentJQuery = window.parent.jQuery; var ifrms = parentJQuery("iframe.upload_iframe"); for (var i = 0; i < ifrms.length; i++) { if (ifrms[i].contentDocument === win.document) return ifrms[i]; } return null; }