¿Cómo comunicarse entre el iframe y el sitio principal?
El sitio web en el iframe no está ubicado en el mismo dominio , pero ambos son míos y me gustaría comunicarme entre el iframesitio principal y el. ¿Es posible?
Con dominios diferentes, no es posible llamar a métodos ni acceder directamente al documento de contenido del iframe.
Tienes que utilizar mensajería entre documentos .
padre -> iframe
Por ejemplo en la ventana superior:
myIframe.contentWindow.postMessage('hello', '*');
y en el iframe:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
marco flotante -> padre
Por ejemplo en la ventana superior:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
y en el iframe:
window.top.postMessage('hello', '*')
En 2018 y en los navegadores modernos, puede enviar un evento personalizado desde el iframe a la ventana principal.
marco flotante:
var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)
padre:
window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
console.log(e.detail) // outputs: {foo: 'bar'}
}
PD: Por supuesto, puedes enviar eventos en dirección opuesta de la misma manera.
document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)
Esta biblioteca admite HTML5 postMessage y navegadores heredados con cambio de tamaño + hash https://github.com/ternarylabs/porthole
Editar: ahora en 2014, el uso de IE6/7 es bastante bajo, IE8 y, sobre todo, soporte, postMessagepor lo que ahora sugiero usar solo eso.
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Úselo event.source.window.postMessagepara enviar de vuelta al remitente.
Desde marco flotante
window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
if (event.data === 'GOT_YOU_IFRAME') {
console.log('Parent received successfully.')
}
}
Luego los padres responden.
window.onmessage = (event) => {
event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}
Actualizado:
postMessageno debería funcionar en dominios cruzados, por lo que la solución es así:
Por ejemplo su sitio web es: customer.comy su dominio esmy.com
Necesitas hacer así
- Cree un archivo js (súbalo a CDN o a su servidor) -
my.com - Incruste el archivo js arriba para
customer.com
Ahora desde my.com, puede postMessagey sobre el script incrustado se pueden recibir datos suyos.
