Invocación de código JavaScript en un iframe desde la página principal

Básicamente, tengo un iframeincrustado en una página y iframetiene algunas rutinas de JavaScript que necesito invocar desde la página principal.

Ahora lo contrario es bastante simple, ya que solo necesita llamar parent.functionName(), pero desafortunadamente, necesito exactamente lo contrario.

Tenga en cuenta que mi problema no es cambiar la URL de origen de la iframe, sino invocar una función definida en iframe.

Suponga que la identificación de su iFrame es "targetFrame" y la función que desea llamar es targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

También puede acceder al marco usando en window.frameslugar de document.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

Hay algunas peculiaridades a tener en cuenta aquí.

1. HTMLIFrameElement.contentWindowes probablemente la forma más fácil, pero no es una propiedad estándar y algunos navegadores no la admiten, en su mayoría los más antiguos. Esto se debe a que el estándar HTML DOM Nivel 1 no tiene nada que decir sobre el windowobjeto.

2. También puede probar HTMLIFrameElement.contentDocument.defaultView, lo que permite un par de navegadores más antiguos, pero IE no. Aun así, el estándar no dice explícitamente que recuperas el windowobjeto, por la misma razón que (1), pero puedes elegir algunas versiones adicionales del navegador aquí si te importa.

3. window.frames['name']devolver la ventana es la interfaz más antigua y, por lo tanto, la más confiable. Pero luego debe usar un name="..."atributo para poder obtener un marco por nombre, que es ligeramente feo / obsoleto / transicional. ( id="..."sería mejor, pero a IE no le gusta eso)

4. window.frames[number]También es muy confiable, pero conocer el índice correcto es el truco. Puede salirse con la suya, por ejemplo. si sabe que solo tiene un iframe en la página.

5. Es completamente posible que el iframe secundario no se haya cargado todavía, o que algo más salió mal para hacerlo inaccesible. Es posible que le resulte más fácil revertir el flujo de comunicaciones: es decir, haga que el iframe secundario notifique su window.parentsecuencia de comandos cuando haya terminado de cargarse y esté listo para ser devuelto. Al pasar uno de sus propios objetos (por ejemplo, una función de devolución de llamada) al script principal, ese padre puede comunicarse directamente con el script en el iframe sin tener que preocuparse de con qué HTMLIFrameElement está asociado.

Es posible llamar a una función JS principal desde iframe, pero solo cuando el principal y la página cargada en el iframemismo son del mismo dominio, es decir, abc.com, y ambos utilizan el mismo protocolo, es decir, ambos están en http://o https://.

La llamada fallará en los casos mencionados a continuación:

1. La página principal y la página de iframe son de dominio diferente.
   
2. Están utilizando diferentes protocolos, uno está en http: // y otro está en https: //.
   

Cualquier solución a esta restricción sería extremadamente insegura.

Por ejemplo, imagina que registré el dominio superwinningcontest.com y envié enlaces a los correos electrónicos de las personas. Cuando cargaron la página principal, pude esconder algunos iframecorreos electrónicos allí y leer su feed de Facebook, verificar las transacciones recientes de Amazon o PayPal o, si usaban un servicio que no implementaba suficiente seguridad, transferir dinero de su cuenta. cuentas Es por eso que JavaScript está limitado al mismo dominio y al mismo protocolo.

En el IFRAME, haga que su función sea pública para el objeto de ventana:

window.myFunction = function(args) {
   doStuff();
}

Para acceder desde la página principal, use esto:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Si el objetivo del iFrame y el documento que lo contiene están en un dominio diferente, los métodos publicados anteriormente podrían no funcionar, pero hay una solución:

Por ejemplo, si el documento A contiene un elemento iframe que contiene el documento B, y el script en el documento A llama a postMessage () en el objeto Window del documento B, entonces se disparará un evento de mensaje en ese objeto, marcado como originario de la ventana de documento A. El script en el documento A podría verse así:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Para registrar un controlador de eventos para eventos entrantes, el script usaría addEventListener () (o mecanismos similares). Por ejemplo, el script en el documento B podría verse así:

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

Este script primero comprueba que el dominio es el dominio esperado, y luego mira el mensaje, que se muestra al usuario o responde enviando un mensaje al documento que envió el mensaje en primer lugar.

a través de http://dev.w3.org/html5/postmsg/#web-messaging

Solo para el registro, me encontré con el mismo problema hoy, pero esta vez la página estaba incrustada en un objeto, no en un iframe (ya que era un documento XHTML 1.1). Así es como funciona con objetos:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(perdón por los saltos de línea feos, no cabía en una sola línea)

El IFRAME debe estar en la frames[]colección. Usa algo como

frames['iframeid'].method();

Quirksmode tenía una publicación sobre esto .

Como la página ahora está rota y solo se puede acceder a través de archive.org, la reproduje aquí:

IFrames

En esta página, proporciono una breve descripción general del acceso a los iframes desde la página en la que se encuentran. No es sorprendente que haya algunas consideraciones sobre el navegador.

Un iframe es un marco en línea, un marco que, si bien contiene una página completamente separada con su propia URL, se coloca dentro de otra página HTML. Esto ofrece muy buenas posibilidades en el diseño web. El problema es acceder al iframe, por ejemplo, para cargar una nueva página en él. Esta página explica cómo hacerlo.

Marco u objeto?

La pregunta fundamental es si el iframe se ve como un marco o como un objeto.

• Como se explica en la Introducción a las páginas de marcos , si usa marcos, el navegador crea una jerarquía de marcos para usted (top.frames[1].frames[2] y tal). ¿Encaja el iframe en esta jerarquía de cuadros?
• ¿O el navegador ve un iframe como un objeto más, un objeto que tiene una propiedad src? En ese caso, tenemos que usar una llamada DOM estándar (como document.getElementById('theiframe'))acceder a ella. En general, los navegadores permiten ambas vistas en iframes 'reales' (codificados), pero no se puede acceder a los iframes generados como marcos.

NOMBRE atributo

La regla más importante es dar a cualquier iframe que cree un nameatributo, incluso si también usa un id.

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

La mayoría de los navegadores necesitan el nameatributo para que el iframe forme parte de la jerarquía de cuadros. Algunos navegadores (especialmente Mozilla) necesitan idque el iframe sea accesible como un objeto. Al asignar ambos atributos al iframe, mantiene sus opciones abiertas. Pero namees mucho más importante que id.

Acceso

O accede al iframe como un objeto y lo cambia srco accede al iframe como un marco y lo cambia location.href.

document.getElementById ('iframe_id'). src = 'newpage.html'; marcos ['iframe_name']. location.href = 'newpage.html'; La sintaxis del marco es ligeramente preferible porque Opera 6 lo admite pero no la sintaxis del objeto.

Accediendo al iframe

Por lo tanto, para una experiencia completa entre navegadores, debe asignarle un nombre al iframe y usar el

frames['testiframe'].location.href

sintaxis. Hasta donde yo sé, esto siempre funciona.

Accediendo al documento

Acceder al documento dentro del iframe es bastante simple, siempre que use el nameatributo. Para contar el número de enlaces en el documento en el iframe, haga frames['testiframe'].document.links.length.

Iframes generados

Sin embargo, cuando genera un iframe a través del W3C DOM, el iframe no se ingresa inmediatamente en la framesmatriz, y elframes['testiframe'].location.href sintaxis no funcionará de inmediato. El navegador necesita un poco de tiempo antes de que el iframe aparezca en la matriz, tiempo durante el cual no se puede ejecutar ningún script.

los document.getElementById('testiframe').src sintaxis funciona bien en todas las circunstancias.

El targetatributo de un enlace tampoco funciona con los iframes generados, excepto en Opera, aunque di mi iframe generado tanto a namecomo aid .

La falta de targetsoporte significa que debe usar JavaScript para cambiar el contenido de un iframe generado, pero dado que necesita JavaScript de todos modos para generarlo en primer lugar, no veo esto como un gran problema.

Tamaño del texto en iframes

Un curioso solo error del Explorer 6:

Cuando cambia el tamaño del texto a través del menú Ver, los tamaños de texto en iframes se cambian correctamente. Sin embargo, este navegador no cambia los saltos de línea en el texto original, por lo que parte del texto puede volverse invisible o pueden ocurrir saltos de línea mientras la línea aún puede contener otra palabra.

Encontré una solución bastante elegante.

Como dijiste, es bastante fácil ejecutar el código ubicado en el documento principal. Y esa es la base de mi código, hacer todo lo contrario.

Cuando se carga mi iframe, llamo a una función ubicada en el documento principal, pasando como argumento una referencia a una función local, ubicada en el documento del iframe. El documento padre ahora tiene acceso directo a la función del iframe a través de esta referencia.

Ejemplo:

En el padre:

function tunnel(fn) {
    fn();
}

En el iframe:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

Cuando se carga el iframe, llamará a parent.tunnel (YourFunctionReference), que ejecutará la función recibida en el parámetro.

Así de simple, sin tener que lidiar con todos los métodos no estándar de los distintos navegadores.

Algunas de estas respuestas no abordan el problema de CORS, o no hacen obvio dónde coloca los fragmentos de código para hacer posible la comunicación.

Aquí hay un ejemplo concreto. Digamos que quiero hacer clic en un botón en la página principal y que haga algo dentro del iframe. Así es como lo haría.

parent_frame.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

Para ir en la otra dirección (haga clic en el botón dentro del iframe para llamar al método fuera del iframe) simplemente cambie el lugar donde vive el fragmento de código y cambie esto:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

a esto:

window.parent.postMessage('foo','*')

Continuando con JoelAnair's respuesta :

Para mayor robustez, use lo siguiente:

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

Funcionó como encanto :)

Siguiendo la respuesta de Nitin Bansal

y para aún más robustez:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

y

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

       $("#myframe").load(function() {
            alert("loaded");
        });

Las mismas cosas pero de una manera un poco más fácil será Cómo actualizar la página principal desde la página dentro del iframe . Simplemente llame a la función de la página principal para invocar la función de JavaScript para volver a cargar la página:

window.location.reload();

O haga esto directamente desde la página en iframe:

window.parent.location.reload();

Ambas obras.

Intenta solo parent.myfunction()

Si desea invocar la función JavaScript en el elemento primario desde el iframe generado por otra función, por ejemplo, shadowbox o lightbox.

Debe intentar hacer uso del windowobjeto e invocar la función padre:

window.parent.targetFunction();

Use el siguiente para llamar a la función de un marco en la página principal

parent.document.getElementById('frameid').contentWindow.somefunction()