如何从JavaScript访问父Iframe

9 回答

• 78

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

  回复于 2024-04-25T07:51:19+08:00
• 10

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

  回复于 2024-04-25T07:51:19+08:00
• -1

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

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

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

  parent.document.getElementById(window.name);
  

  回复于 2024-04-25T07:51:19+08:00
• 68

  只需从您的框架页面调用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;
  }
  

  回复于 2024-04-25T07:51:19+08:00
• 123

  我建议使用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的更多信息here

  回复于 2024-04-25T07:51:19+08:00
• 15

  老问题，但我刚遇到同样的问题，并找到了获取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 .

  回复于 2024-04-25T07:51:19+08:00
• 3

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

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

  回复于 2024-04-25T07:51:19+08:00
• 28

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

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

  适用于IE，Chrome和FF .

  回复于 2024-04-25T07:51:19+08:00
• 5

  也许只是使用

  window.parent
  

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

  window.top
  

  回复于 2024-04-25T07:51:19+08:00