Cómo acceder al iframe principal desde JavaScript

window parent iframe

Question

Bueno, tengo un IFrame, que llama a una misma página de dominio. Mi problema es que quiero acceder a cierta información de este iframe padre de esta página llamada (desde JavaScript). ¿Cómo puedo acceder a este iframe?

Detalles: hay varios Iframes como este, que pueden tener cargada la misma página, porque estoy programando un entorno de Windows. Tengo la intención de cerrar este Iframe, es por eso que necesito saber cuál debería cerrar desde dentro de él. Tengo una matriz que guarda referencias a estos Iframes.

EDITAR: los iframes se generan dinámicamente

Answer 1

Intenta esto, en tu marco principal configura tus IFRAME así:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

Tenga en cuenta que la identificación de cada marco se pasa como un ancla en el src.

luego, en su html interno puede acceder al id del marco en el que está cargado a través de location.hash:

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

luego puede acceder a parent.document.getElementById () para acceder a la etiqueta iframe desde dentro del iframe

Answer 2

Simplemente llame a window.frameElement desde su página enmarcada. Si la página no está en un marco, frameElement será null .

La otra forma (obtener el elemento de la ventana dentro de un marco es menos trivial), pero para completar:

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

Tal vez solo use

window.parent

en su iframe para obtener el marco / ventanas de llamada. Si tiene múltiples marcos de llamadas, puede usar

window.top

Answer 4

También puede establecer el nombre y la ID a valores iguales

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

para que pueda usar el siguiente código dentro de la página secundaria

parent.document.getElementById(window.name);

Answer 5

Una vez que se establece id de iframe, puede acceder al iframe desde el documento interno como se muestra a continuación.

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

Funciona bien en IE, Chrome y FF.

Answer 6

Una vieja pregunta, pero tuve el mismo problema y encontré una forma de obtener el iframe. Es simplemente una cuestión de iterar a través de la matriz de cuadros de la ventana principal y probar la ventana de contenido de cada marco en la ventana en la que se está ejecutando su código. Ejemplo:

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

O, usando jQuery:

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

Este método guarda la asignación de un ID a cada iframe, lo cual es bueno en su caso, ya que se crean dinámicamente. No pude encontrar una forma más directa, ya que no puede obtener el elemento iframe usando window.parent: va directamente al elemento de la ventana principal (omitiendo el iframe). Así que recorrerlos parece ser la única forma, a menos que quiera usar ID.

Answer 7

Yo recomendaría usar la API postMessage .

En tu iframe, llama:

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

En la página que está incluyendo el iframe, puede escuchar eventos como este:

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

    }, false);

Por cierto, también es posible hacer llamadas a otras ventanas, y no solo a iframes.

Lea más sobre la API postMessage en el blog de John Resigs here

Answer 8

puede usar parent para acceder a la página principal. Entonces, para acceder a una función sería:

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

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