如何从JavaScript访问父Iframe ?

Well, I have an IFrame, which calls a same domain page. My problem is that I want to access some information from this parent Iframe from this called page (from JavaScript). How can I access this Iframe?

我有一个IFrame，它调用相同的域页面。我的问题是，我想从这个名为page(来自JavaScript)的父Iframe中访问一些信息。如何访问这个Iframe?

Details: There are several Iframes just like this one, that can have the same page loaded, because I am programming a Windows environment. I intend to close this Iframe, that's why I need to know which I should close from inside him. I have an array keeping references to these Iframes.

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

EDIT: There iframes are generated dynamically

编辑:会动态生成iframe

9 个解决方案

#1

119

Also you can set name and ID to equal values

还可以将名称和ID设置为相等的值

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

so you will be able to use next code inside child page

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

parent.document.getElementById(window.name);

#2

Simply call window.frameElement from your framed page. If the page is not in a frame then frameElement will be null.

只需从框架页面调用window.frameElement。如果页面不在框架中，那么frameElement将为空。

The other way (getting the window element inside a frame is less trivial) but for sake of completeness:

另一种方法(在框架中获取窗口元素不是那么简单)，但是为了完整性:

/**
 * @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;
}

#3

I would recommend using the postMessage API.

我建议使用postMessage API。

In your iframe, call:

在你的iframe,电话:

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

In the page you're including the iframe you can listen for events like this:

在页面中包括iframe，您可以侦听如下事件:

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

    }, false);

By the way, it is also possible to do calls to other windows, and not only iframes.

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

Read more about the postMessage API on John Resigs blog here

请阅读更多关于约翰·戴斯博客的postMessage API

#4

Old question, but I just had this same issue and found a way to get the iframe. It's simply a matter of iterating through the parent window's frames[] array and testing each frame's contentWindow against the window in which your code is running. Example:

老问题，但我也有同样的问题找到了一种获得iframe的方法。这只是遍历父窗口的frame[]数组并针对代码运行的窗口测试每个帧的contentWindow的问题。例子:

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

Or, using jQuery:

或者,使用jQuery:

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

This method saves assigning an ID to each iframe, which is good in your case as they are dynamically created. I couldn't find a more direct way, since you can't get the iframe element using window.parent - it goes straight to the parent window element (skipping the iframe). So looping through them seems the only way, unless you want to use IDs.

这个方法节省了为每个iframe分配ID的时间，这在动态创建iframe时很有用。我找不到一种更直接的方法，因为您无法使用窗口获得iframe元素。父-它直接到父窗口元素(跳过iframe)。所以循环遍历它们似乎是唯一的方法，除非您想使用id。

#5

you can use parent to access the parent page. So to access a function it would be:

可以使用parent来访问父页面。因此，要访问一个函数，它应该是:

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

#6

Once id of iframe is set, you can access iframe from inner document as shown below.

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

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

Works well in IE, Chrome and FF.

适用于IE, Chrome和FF。

#7

Maybe just use

也许只使用

window.parent

into your iframe to get the calling frame / windows. If you had multiple calling frame, you can use

进入你的iframe以获得调用框架/窗口。如果有多个调用帧，可以使用

window.top

#8

Try this, in your parent frame set up you IFRAMEs like this:

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

Note that the id of each frame is passed as an anchor in the src.

注意，每个帧的id作为一个锚在src中传递。

then in your inner html you can access the id of the frame it is loaded in via location.hash:

然后，在你的内部html中，你可以通过location。hash:

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

then you can access parent.document.getElementById() to access the iframe tag from inside the iframe

然后可以访问parent.document.getElementById()，从iframe内部访问iframe标记

#9

-1

// 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;
}

#1

119