postMessage 팝업창에서 부모창으로 데이터 전달

 

 

postMessage 팝업창에서 부모창으로 데이터 전달

 

팝업창 


    <script>
        function sendMessageToParent() {
            const memo_title = 'test title'; // 예제 데이터
            const memo_content = 'test content'; // 예제 데이터

            // 부모창에 데이터 전송
            window.opener.postMessage(
                {
                    type: 'memo_data',
                    payload: { memo_title , memo_content }
                },
                window.location.origin // 보안 설정을 위해 동일한 origin으로 제한
            );

            // 팝업창 닫기
            window.close();
        }
    </script>



부모창
    <script>
        let popupWindow;

        function openPopup() {
            // 팝업창 열기
            popupWindow = window.open('popup.html', 'testPopup', 'width=600,height=400');
        }

        // 팝업창에서 메시지를 받을 이벤트 핸들러
        window.addEventListener('message', (event) => {
            // 안전성을 위해 도메인 검증
            if (event.origin !== window.location.origin) {
                console.error('Unauthorized message origin:', event.origin);
                return;
            }

            console.log('Message from popup:', event.data);

            // 받은 데이터 처리 (예: HTML 업데이트)
            if (event.data.type === 'memo_data') {
                const { memo_title , memo_content } = event.data.payload;
                jQuery('#memo_title').val(memo_title);
                jQuery('#memo_content').val(memo_content);
            }
        });
    </script>