Як спілкуватися між iframe та батьківським сайтом?

Веб-сайт у iframe розташований не в одному домені , але обидва є моїми, і я хотів би спілкуватися між iframeбатьківським сайтом та його батьків. Це можливо?

З різними доменами неможливо викликати методи або отримати доступ до документа зі змістом iframe безпосередньо.

Ви повинні використовувати перехресні документи .

Наприклад, у верхньому вікні:

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

і в iframe:

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

Якщо ви публікуєте повідомлення з iframe у батьківське вікно

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

Це повинно бути тут, бо прийняли відповідь з 2012 року

У 2018 році та сучасних браузерах ви можете надіслати власну подію з iframe до батьківського вікна.

iframe:

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

батьків:

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

PS: Звичайно, ви можете відправляти події у зворотному напрямку аналогічним чином.

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

Ця бібліотека підтримує HTML5 postMessage і застарілі браузери з розміром + хеш https://github.com/ternarylabs/porthole

Редагувати: Зараз у 2014 році використання IE6 / 7 є досить низьким, IE8 і перш за все підтримкою, postMessageтому я пропоную просто скористатися цим.

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

window.topвласність повинна бути в змозі дати то , що вам потрібно.

Напр

alert(top.location.href)

Дивіться http://cross-browser.com/talk/inter-frame_comm.html

Ви також можете використовувати

postMessage(message, '*');

Використовуйте event.source.window.postMessageдля повернення відправнику.

Від Іфрейму

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

Потім від батьків скажіть назад.

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