Jak komunikować się między ramką iframe a witryną nadrzędną?

Strona internetowa w ramce iframe nie znajduje się w tej samej domenie , ale obie są moje i chciałbym się komunikować między iframewitryną nadrzędną a nią. Czy to możliwe?

W przypadku różnych domen nie można wywoływać metod ani uzyskiwać bezpośredniego dostępu do dokumentu treści iframe.

Musisz używać przesyłania wiadomości między dokumentami .

Na przykład w górnym oknie:

 myIframe.contentWindow.postMessage('hello', '*');

oraz w ramce iframe:

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Jeśli publikujesz wiadomość z elementu iframe w oknie nadrzędnym

window.top.postMessage('hello', '*')

Musi tu być, ponieważ zaakceptowano odpowiedź z 2012 roku

W 2018 roku i we współczesnych przeglądarkach możesz wysłać niestandardowe zdarzenie z iframe do okna nadrzędnego.

iframe:

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

rodzic:

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

PS: Oczywiście możesz wysyłać zdarzenia w przeciwnym kierunku w ten sam sposób.

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Ta biblioteka obsługuje HTML5 postMessage i starsze przeglądarki z funkcją resize + hash https://github.com/ternarylabs/porthole

Edycja: Teraz w 2014 r. Zużycie IE6 / 7 jest dość niskie, IE8 i przede wszystkim obsługa, postMessagewięc teraz sugeruję, aby po prostu z niego korzystać.

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

window.topnieruchomość powinna być w stanie dać to, czego potrzebujesz.

Na przykład

alert(top.location.href)

Zobacz http://cross-browser.com/talk/inter-frame_comm.html

Możesz także użyć

postMessage(message, '*');

Użyj, event.source.window.postMessageaby odesłać z powrotem do nadawcy.

Z iframe

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

Następnie od rodzica odpowiedz.

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}