如何从 JavaScript 访问父 Iframe

我有一个 IFrame，它调用同一个域页面。 我的问题是，我想从这个被调用的页面(从 JavaScript)访问一些来自这个父 Iframe 的信息。我如何访问这个 Iframe？译注:

详细信息: 有几个像这样的帧，可以加载相同的页面，因为我正在编写一个 Windows 环境。我打算关闭这个 Iframe，这就是为什么我需要知道我应该从他体内关闭哪个。我有一个数组来保存对这些 Iframe 的引用。

编辑: iframe 是动态生成的

462783 次浏览
小开

你可以使用 parent来访问父页面，所以要访问一个函数，应该是:

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

试试这个，在你的父框架设置你的 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 标记

小开

还可以将 name 和 ID 设置为等值

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

因此您将能够在子页中使用下一个代码

parent.document.getElementById(window.name);
小开

老问题了，但我也遇到了同样的问题找到了获取 iframe 的方法。只需要遍历父窗口的 frames []数组，并针对运行代码的窗口测试每个帧的 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");
});

这种方法可以保存为每个 iframe 分配的 ID，这在您的情况下很好，因为它们是动态创建的。我找不到更直接的方法，因为无法使用 window.rent 获取 iframe 元素——它直接转到父 window 元素(跳过 iframe)。因此，循环访问它们似乎是唯一的方法，除非您希望使用 ID。

小开

也许只是利用

window.parent

如果你有多个调用框架，你可以使用

window.top
小开 
// 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;
}
小开
只需从你的框架页面调用 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;
}
小开

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

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

在 IE，Chrome 和 FF 中运行良好。

小开

我建议使用 邮件 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);

顺便说一下，也可以调用其他窗口，而不仅仅是 iframe。

在 John Resigsblog 给你上阅读更多关于 postMessageAPI 的内容


提交答案