触发从 iframe 到父 window 的自定义事件

Question

我正在尝试触发自定义事件并将一些数据从 iframe 传递给父 window。 iframe 和父 window 都是不同的域。

下面是我在 iframe 文档中用于触发自定义事件的代码。

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

下面是我在父文档中用于监听自定义事件的代码。

window.document.addEventListener('testevent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail);
}

但这会导致以下控制台错误：

Uncaught DOMException: Blocked a frame with origin "http://testiframeevent.local" from accessing a cross-origin frame.

有什么解决办法吗？

Answer 1

您需要使用 postMessage 在窗口/框架之间进行通信。 我只需要做同样的事情，所以这是我实现它的方式：

在 iframe 中包含的文档中...

// sendEvent uses postMessage to send a serialized object to the parent window
function sendEvent( status ) {
    var obj = {
        message_type: 'game_status',
        status: status
    };
    window.parent.postMessage( JSON.stringify(obj), 'http://example.net' ); // change to the domain on which the parent window is located
}

// called such as sendEvent('won');

然后在父 window...

// create and add our event listeners
const winEvent = new CustomEvent( 'gameevent', { detail: { game: 'won' } } );
const loseEvent = new CustomEvent( 'gameevent', { detail: { game: 'lost' } } );

document.addEventListener( 'gameevent', function(e) {
    alert('The game was ' + e.detail.game );
} );

// handleMessage is used to receive a message from the iframe
window.addEventListener( 'message', handleMessage, false );

function handleMessage(event) {
    // ensure the message originated from the same domain the iframe is on
    if (event.origin != 'http://example.com' ) {
        return;
    }
    var eventData = JSON.parse( event.data );
    switch( eventData.message_type ) {
        case 'game_status':
            if ( eventData.status == 'won' ) {
                document.dispatchEvent( winEvent );
            } else {
                document.dispatchEvent( loseEvent );
            }
            break;
    }
}

和 iframe 本身......

<iframe width="100%" height="200" src="http://example.com/iframe-content.php">