bootstrap - Llamar a la función padre de Javascript desde dentro de un iframe

iframe width

Question

Tengo un iframe (en mi dominio), ese iframe tiene un archivo iframe.js .

Mi documento principal tiene un archivo parent.js .

Necesito llamar a una función que está en parent.js , desde una función que está en iframe.js .

Intenté hacer window.parent.myfunction() esta función está en el archivo parent.js .

Pero, no funcionó. Solo cuando puse la función en la página principal (quiero decir en el HTML), funcionó.

¿Alguna idea de cómo hacer que esto funcione?

Answer 1

Prueba solo parent.myfunction() . También esté 100% seguro de que parent.js está incluido en su documento principal.

Answer 2

Sé que esta es una vieja pregunta, pero en caso de que la respuesta aceptada no funcione (no funcionó para mí) podrías hacer esto dentro de parent.js

window.myfunction = function () {
alert("I was called from a child iframe");
}

Ahora desde el iframe puedes llamar a myfunction () como inicialmente quisiste

window.parent.myfunction();

Answer 3

Window.postMessage() método Window.postMessage() permite de forma segura la comunicación de cross-origin .

Si tiene acceso a la página principal, se pueden pasar los datos y se puede Iframe directamente a cualquier método padre desde Iframe .

Página principal:

if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFuncName(message) {
alert(message);
}

Código iframe:

window.parent.postMessage({
''func'': ''parentFuncName'',
''message'': ''Message text from iframe.''
}, "*");

Referencias

• Mensajería entre documentos ( https://html.spec.whatwg.org/multipage/comms.html#web-messaging )
• Método Window.postMessage ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage )
• ¿Puedo usar ( http://caniuse.com/#search=postMessage )