İframe ve üst site arasında nasıl iletişim kurulur?

İframe'deki web sitesi aynı alanda değil , ancak her ikisi de benim iframeve üst site ile iletişim kurmak istiyorum . Mümkün mü?

Farklı alan adlarıyla, yöntemleri aramak veya iframe'in içerik belgesine doğrudan erişmek mümkün değildir.

Sen kullanmak zorunda çapraz belge mesajlaşma .

Örneğin üst pencerede:

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

ve iframe'de:

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

İframe'den üst pencereye mesaj gönderiyorsanız

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

Burada olmalı, çünkü 2012'den kabul edilen cevap

2018 ve modern tarayıcılarda iframe'den üst pencereye özel bir etkinlik gönderebilirsiniz.

iframe:

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

ebeveyn:

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

PS: Tabii ki, aynı şekilde olayları ters yönde gönderebilirsiniz.

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

Bu kitaplık HTML5 postMessage ve resize + hash özellikli eski tarayıcıları destekler https://github.com/ternarylabs/porthole

Edit: Şimdi 2014 yılında, IE6 / 7 kullanımı oldukça düşük, IE8 ve her şeyden önce destek postMessagebu yüzden şimdi sadece bunu kullanmanızı öneririz.

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

window.topmülkiyet neye ihtiyacınız vermek gerekir.

Örneğin

alert(top.location.href)

Bkz. Http://cross-browser.com/talk/inter-frame_comm.html

Ayrıca kullanabilirsiniz

postMessage(message, '*');

event.source.window.postMessageGönderene geri göndermek için kullanın .

Iframe'den

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

Sonra ebeveynlerden geri söyleyin.

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