Как общаться между iframe и родительским сайтом?

Веб-сайт в iframe не находится в одном домене , но оба они мои, и я хотел бы установить связь между iframeродительским сайтом и. Является ли это возможным?

Для разных доменов невозможно вызвать методы или получить прямой доступ к документу содержимого iframe.

Вы должны использовать обмен сообщениями между документами .

Например в верхнем окне:

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

и в фрейме:

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', '*')
}