JavaScript Javascript 자식창에서 부모창으로 데이터 전달하기

2018.08.23 11:04

Javascript 자식창에서 부모창으로 데이터 전달하기

요구사항

window.open 명령을 통해 팝업창(자식창)을 띄운 경우 부모창으로 데이터를 전달하고 싶다.

var childWindow = window.open("http://havebeard.com");

4가지 방법들

localStorage를 통해 전달

동일한 도메인에 있는 경우 브라우저의 localStorage(혹은 cookie)에 저장하고
부모창에서 이 localStorage을 읽어 쓴다.

별 문제 없지만 불필요하게 외부 소싱을 쓰는 것같은 느낌이 든다.

부모창에 변수 전달

window.opener가 부모창을 부르기 때문에 아래와 같이 변수의 value를 셋팅해 주는 것이 가능하다.

자식창

window.opener.document.getElementById("fromInput").value = 'hallow';

부모창

<input type="text" id="fromInput">

단순히 부모창에 노출해 주는 것이면 이것으로 되겠지만
값을 가져다가 다른 액션을 하고자 하면
자식창에서 언제 데이터를 전달해주는지 부모창에서 알 수 없기 때문에 복잡해 진다.

postMessage 사용

postMessage를 사용하면 다른 창으로 메시지를 전달해 줄 수 있다. 단, 부모창에서 addEventListener를 추가하여 message를 대기한다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

자식창

window.opener.postMessage('hallow', "http://havebeard.com");
/* 두번째 파라메터 "http://havebeard.com"는 해킹방지를 위해. "*"을 쓰면 target체크 안함.  */

부모창

window.addEventListener('message', function(event) {
    if(event.srcElement.location.href==window.location.href){
        /* 전달받은 event.data 를 가지고 원하는 추가 액션 수행 */
    }
});

function 호출

자식창에서 부모창의 fuction을 호출한다.
function을 호출하는 것이기 때문에 데이터의 흐름과 로직을 깔끔하게 할 수 있는 것 같다.

자식창

window.opener.somFunc('hallow');

부모창

somFunc(data) {
    alert(data);
}

Angular를 사용한다면 외부의 호출을 받기위해 아래의 작업을 해 주어야 한다.

자식창에서 부른 window에 선언된 somFunc()이 없기 때문에 선언 및 외부 호출을 감지하기 위한 NgZone 사용이 필요하다.

typings.d.ts 파일

interface Window { somFunc(): any; }

부모component 파일

constructor(private ngZone: NgZone) {
}  
ngOnInit() {
    window.somFunc = this.somFunc.bind(this);
}  
ngOnDestroy() {
    window.somFunc = null;
}  
somFunc(data) {
    this.ngZone.run(() => this.privateFunc(data));
}
privateFunc(data) {
    alert(data);
}

[출처] http://havebeard.com/javascript-%EC%9E%90%EC%8B%9D%EC%B0%BD%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8%EC%B0%BD%EC%9C%BC%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0/

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
20	[nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함	졸리운_곰	2025.12.12	501
19	[node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동)	졸리운_곰	2024.03.17	300
18	[node.js 개발] PM2로 Node.js 앱 프로세스 배포하기	졸리운_곰	2024.03.16	405
17	[node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기	졸리운_곰	2024.03.16	517
16	[node.js 응용] Next.js : Next.js14에 Mysql연결하기	졸리운_곰	2024.03.03	379
15	[node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법	졸리운_곰	2024.02.28	428
14	[node.js 응용] NodeJS 에서 mqtt 사용하기	졸리운_곰	2024.02.23	399
13	[node.js 응용] Next.js 기본 개념정리	졸리운_곰	2024.02.23	432
12	[node.js 응용] ejs 사용설명서	졸리운_곰	2023.11.25	371
11	[node.js 응용] Build a Node.js Proxy Server in Under 10 minutes!	졸리운_곰	2023.05.07	468
10	[node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기	졸리운_곰	2023.04.25	407
9	[node.js 응용] Node.js \| MySQL과 연동(mysql모듈) - CRUD 2/2	졸리운_곰	2023.03.31	231
8	[node.js 응용] Node.js \| MySQL과 연동(mysql모듈) - CRUD 1/2	졸리운_곰	2023.03.31	484
7	[node.js 응용] PM2 - Node.js 프로세스 관리 도구	졸리운_곰	2021.12.10	410
6	[node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기	졸리운_곰	2021.10.11	484
5	[node.js][typescript] 5분 안에 보는 TypeScript	졸리운_곰	2021.07.03	428
4	Getting started with RabbitMQ and Node.js	졸리운_곰	2019.05.09	466
3	[Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리	졸리운_곰	2019.05.09	352
2	node.js 서버 장애시 자동 재시작 설정 [forever 사용]	졸리운_곰	2019.01.24	884
1	Express 앱용 프로세스 관리자	졸리운_곰	2018.10.16	603

첫 페이지 1 끝 페이지

쓰기

태그