자바스크립트 window.open으로 동적 창 열고 데이터 전송하는 법

자바스크립트에서 `window.open()` 함수를 사용하여 새 창을 열고, `window.opener.postMessage`를 통해 부모 창과 자식 창 간에 데이터를 안전하게 주고받는 방법을 안내합니다.

window.open() 함수 활용법과 주요 옵션

자바스크립트의 `window.open()` 함수는 새로운 브라우저 창이나 탭을 열거나, 이미 열린 창을 재사용할 때 사용됩니다. 주로 외부 링크를 새 탭으로 열거나, 보조적인 UI를 팝업 형태로 띄울 때 유용하게 활용됩니다. 이 함수의 `features` 인자에는 창의 크기, 위치, 스크롤바 표시 여부 등 다양한 옵션을 설정할 수 있습니다. 예를 들어, `width=${w}`, `height=${h}`, `left=0`, `top=0`, `toolbar=no`, `menubar=no`, `location=no`, `status=no`, `resizable=no`, `scrollbars=no` 등을 조합하여 원하는 형태로 창을 제어할 수 있습니다. 특히 `window.opener.postMessage`를 사용할 때는 보안상의 이유로 `noopener`나 `noreferrer` 옵션은 주석 처리하거나 제거하는 것이 일반적입니다.

위 이미지는 `window.open()` 함수를 통해 새 창을 열고, 해당 창의 크기와 위치를 사용자의 화면에 맞게 동적으로 설정하는 예시를 시각적으로 보여줍니다. 화면의 가용 너비(`availWidth`)와 높이(`availHeight`)를 기준으로 창 크기를 결정하며, 이를 통해 사용자는 최적화된 환경에서 새 창의 콘텐츠를 확인할 수 있습니다.

window.opener.postMessage로 부모-자식 창 데이터 통신

새로 열린 자식 창에서 부모 창으로 데이터를 안전하게 전달하기 위해 `window.opener.postMessage()` 메서드를 사용합니다. 이 메서드는 `window.open()`으로 열린 창의 `opener` 객체를 통해 접근할 수 있으며, 첫 번째 인자로 전송할 데이터를, 두 번째 인자로는 메시지를 수신할 대상 창의 출처(origin)를 지정합니다. 예를 들어, `window.opener.postMessage('자식 창에서 보낸 데이터', 'https://example.com');`와 같이 사용합니다. 부모 창에서는 `window.addEventListener('message', receiveMessage)`를 사용하여 자식 창으로부터 전달된 메시지를 수신하고 처리할 수 있습니다. 이 통신 방식은 크로스-오리진(cross-origin) 환경에서도 보안적으로 안전하게 데이터를 주고받을 수 있어 웹 애플리케이션 개발에서 매우 중요하게 활용됩니다.