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/

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
8	제로보드 XE의 최근 게시글 5개를 DB에서 직접 조회	졸리운_곰	2020.08.04	456
7	python 으로 XE mysql 쿼리로 자동 게시물 등록하기	졸리운_곰	2020.03.03	448
6	[WP]외부 게시판을 IFRAME으로 넣기	졸리운_곰	2019.01.30	533
5	XE(제로보드) 게시판 내 스크립트 사용하기	가을의곰	2017.06.18	735
4	XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기.	가을의곰	2017.06.18	308
3	예제를 통해 쉽게 읽어보는 XE모듈개발 시작하기	졸리운_곰	2016.05.10	586
2	[시니시즘] 비회원에게 파일 다운로드 권한이 없다고 뜰 때	졸리운_곰	2016.04.14	767
1	XE 템플릿 구문	졸리운_곰	2015.05.12	1136

첫 페이지 1 끝 페이지

쓰기

태그