如何从JavaScript访问父Iframe

Question

好吧,我有一个IFrame,它调用相同的域页面.我的问题是我想从这个被调用的页面(来自JavaScript)访问来自这个父iframe的一些信息.如何访问此iframe？

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

编辑:动态生成iframe

Answer 1

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

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

这样您就可以在子页面中使用下一个代码了

parent.document.getElementById(window.name);

Answer 2

只需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;
}

Answer 3

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

顺便说一句,它也可以调用其他窗口,而不仅仅是iframe.

在此处阅读John Resigs博客上有关postMessage API的更多信息

Answer 4

老问题,但我刚遇到同样的问题,并找到了获取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.parent获取iframe元素 - 它直接转到父窗口元素(跳过iframe).所以循环遍历它们似乎是唯一的方法,除非你想使用ID.

Answer 5

您可以使用parent访问父页面.所以要访问一个函数,它将是:

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

Answer 6

设置iframe的ID后,您可以从内部文档访问iframe,如下所示.

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

适用于IE,Chrome和FF.

Answer 7

也许只是用

window.parent

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

window.top