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/

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
60	Is there a limit of vertices in WebGL? 웹지엘의 제약사항	졸리운_곰	2017.08.16	553
59	JavaScript Performance Monitor	졸리운_곰	2017.08.16	371
58	Monitor Rendering Performance Within Three.js	졸리운_곰	2017.08.16	541
57	List of WebGL frameworks	졸리운_곰	2017.08.16	500
56	From Unity to Three.js	졸리운_곰	2017.08.16	1750
55	Collada dae to three.js json convertor sample	졸리운_곰	2017.08.16	579
54	THREE.WebGLShader: Shader couldn't compile - Chrome Version 44.0.2403.125 #6929	졸리운_곰	2017.08.10	556
53	Uniforms types	졸리운_곰	2017.08.10	547
52	Custom shaders with Three.JS: Uniforms, textures and lighting	졸리운_곰	2017.08.10	699
51	WebGL and ThreeJS Using Blender Models	졸리운_곰	2017.08.05	356
50	Importing a Modeled Mesh From Blender to Three.js	졸리운_곰	2017.08.05	458
49	Using SketchUp Models OrcaXS edited this page on 27 Apr · 7 revisions	졸리운_곰	2017.08.05	459
48	Three.js Loading .mtl and .obj - object stays white	졸리운_곰	2017.08.05	541
47	[three.js] How to Build a First Person Shooter in the Browser with Three.js and WebGL/HTML5 Canvas	졸리운_곰	2017.07.22	534
46	[three.js] WebGLRenderer	졸리운_곰	2017.07.22	490
45	Clone an Object3D model from a Collada load call	졸리운_곰	2017.07.22	345
44	[three.js] Quaternion 4원수, 사원수 회전	졸리운_곰	2017.07.08	919
43	COLLADA, TinyXML, and OpenGL	졸리운_곰	2017.07.06	502
42	[github][gist] Mouse-Picking Collada Models with THREE.js	졸리운_곰	2017.07.06	584
41	Mouse-Picking Collada Models with three.js, Part II	졸리운_곰	2017.07.06	338

첫 페이지 1 2 3 끝 페이지

쓰기

태그