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'}
}

추신 : 물론, 같은 방식으로 반대 방향으로 이벤트를 보낼 수도 있습니다.

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

이 라이브러리는 resize + hash가있는 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발신자에게 다시 보내는 데 사용 합니다.

Iframe에서

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