Как общаться между iframe и родительским сайтом? - PullRequest
160 голосов
/ 06 февраля 2012

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

Ответы [ 4 ]

266 голосов
/ 06 февраля 2012

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

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

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

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

и в фрейме:

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

Если вы отправляете сообщение из iframe в родительское окно

window.top.postMessage('hello', '*')
21 голосов
/ 12 октября 2018

Это должно быть здесь, потому что принят ответ от 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)
14 голосов
/ 27 февраля 2013

Эта библиотека поддерживает HTML5 postMessage и устаревшие браузеры с изменением размера + хэш https://github.com/ternarylabs/porthole

Редактировать: Сейчас в 2014 году использование IE6 / 7 довольно низкое, IE8 и, прежде всего, поддержка postMessage, поэтому я предлагаюпросто использовать это.

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

3 голосов
/ 06 февраля 2012

свойство window.top должно быть в состоянии дать то, что вам нужно.

например.

alert(top.location.href)

См http://cross -browser.com / ток / между frame_comm.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...