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)할 수 없다.