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/

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
46	Check if a key exists inside a json object : JSON 키값이 있는지 조사	졸리운_곰	2018.09.03	465
45	Grouping JSON by values : JSON 값으로 그룹핑 분류	졸리운_곰	2018.09.01	483
»	Javascript 자식창에서 부모창으로 데이터 전달하기	졸리운_곰	2018.08.23	961
43	[자바스크립트] 정규표현식을 사용하여 태그만 제거하기	졸리운_곰	2018.08.01	675
42	[JS] HTML 태그들을 제거하자! #자바스크립트HTML태그제거 #HTML태그삭제 #HTML태그없애기	졸리운_곰	2018.08.01	384
41	자바스크립트 Base64 인코딩, 디코딩	졸리운_곰	2018.06.18	591
40	Get Query String Parameters with JavaScript	졸리운_곰	2018.06.08	477
39	Get request parameters using Javascript	졸리운_곰	2018.06.08	455
38	json 배열 합치기(merge) 및 소팅하기	졸리운_곰	2018.06.08	683
37	Object.assign 두 개의 Object 를 하나로 병합하기 How to merge different object in javascript	졸리운_곰	2018.06.08	552
36	jQuery.extend(), 두개 이상의 객체를 합치기(Merge)	졸리운_곰	2018.06.08	512
35	jQuery 원하는 요소에 벨류(value) 값 넣기	졸리운_곰	2018.05.30	371
34	[jQuery] 요소(Element) 존재 여부 확인	졸리운_곰	2018.05.29	664
33	[제이쿼리/jQuery] 요소 갯수 구하기 .length	졸리운_곰	2018.05.25	409
32	[삽잡이::javascript] JSON Array를 만들어보자	졸리운_곰	2018.05.25	194
31	Javascript 함수 생성 2가지 방법의 차이점	졸리운_곰	2018.05.24	498
30	React 시작하기 [javascript]	졸리운_곰	2018.05.20	509
29	javascript 에서 큐, 스택, 트리	졸리운_곰	2018.02.27	513
28	CKEditor. Plugin 직접 만들기. 예: Cy-GistInsert	졸리운_곰	2018.02.21	459
27	템플릿 엔진을 벗어나고 싶은 이유, React 와 Angular 2 사이의 갈등 중간 정리	졸리운_곰	2017.09.26	1354

첫 페이지 1 2 3 4 5 6 7 끝 페이지

쓰기

태그