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博客here

上阅读有关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

Answer 8

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

Answer 9

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

如何从JavaScript访问父Iframe

9 个答案: