Skip to content

Cross-window communication

iframe 간의 통신 방법에 대한 설명.

부모창 -> 자식창 

let passData = {member_id:'jjong2028', member_name:'쫑'};
let iframe = document.getElementById('qwer-iframe').contentWindow;
iframe.postMessage(passData, 'http://qwer.co.kr')
/* 넘길프레임.postMessage(넘겨줄 데이터, 허용되는 도메인) */

자식창 -> 부모창 

window.onload = function() {
    let passData = { returnValue : 200 };
    window.parent.postMessage(passData, 'http://asdf.com');
}

데이터 수신

부모창과 자식창 둘 다 동일하다. 

window.addEventListener('message', function(e) {
    //e.data ==> 수신 받은 데이터
    //e.origin ==> 허용된 도메인
    if(e.data.member_id == 'jjong2028') {
        //받은 아이디값이 jjong2028 일때의 로직 처리
    }
});

Troubleshooting

DOMException: Failed to execute '...' could not be cloned 

vue.esm.js?4b29:1906 DOMException: Failed to execute 'postMessage' on 'Window': function onRefreshTokenError() {
        clearSession();
        moveTo(_router_names_root__WEBPACK_IMPORTED_MO...<omitted>... } could not be cloned.
    at VueComponent.onFrameLoad (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/pages/main/MainPlugin.vue?vue&type=script&lang=ts&:85:32)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1871:26)
    at HTMLIFrameElement.invoker (webpack-internal:///./node_modules/vue/dist/vue.esm.js:2196:14)
    at original._wrapper (webpack-internal:///./node_modules/vue/dist/vue.esm.js:7599:25)

iframe 간에 메시지를 전달할 때 위와 같이 복사할 수 없다는 에러가 발생될 수 있다. window 나 document 따위와 같이 다른 윈도우에 종속되는 데이터는 복사(Clone)할 수 없다.

See also

Favorite site