Vue : postMessege 구현

JooSehyun·2024년 6월 20일
0

[Study]

목록 보기
36/56
post-thumbnail

window.open 함수

const _showOpenStudentRouterPage = (paramPathName: string, mngNo: string) => {
    const url = window.location.origin + `/${ paramPathName }`;
    const newWindow = window.open(url, '_blank');

    const mngNoMessage = setInterval(() => {
        if(newWindow) {
            newWindow.postMessage({mngNo: mngNo}, window.location.origin);
            clearInterval(mngNoMessage);
            console.log('postMessage 전달 완료!!');
            
        }
    }, 500)
};

export {
    _showOpenStudentRouterPage as showOpenStudentRouterPage
};

부모 컴포넌트

showOpenStudentRouterPage(`detailEvaluationStudent/${userData.id}`, userData.mngNo);

Router 자식 컴포넌트

onBeforeMount(() => {
		// postMessage 이벤트 리스너 추가
		const handleMessage = (event:any) => {
			// 여기서 event.data를 사용하여 데이터 처리
			console.log('Received data:', event.data.mngNo);
			if(event.data.mngNo) {
				isTest.value = true;
			}
			console.log('isTest:', isTest.value);
			sessionStorage.setItem('Test', event.data.mngNo);
		};

		window.addEventListener('message', handleMessage);
	});

0개의 댓글