외부 페이지 팝업 결과값 CORS 해결법

CLASS/기타

외부 페이지 팝업 결과값 CORS 해결법

hingu 2024. 7. 17. 12:54

⚡ CORS 해결

message는 외부의 값에 대한 내용을 가져오게 되며
해당 값을 data 및 배열키를 이용하여 부모창으로 값을 넘기는 cors해결 방식

- ecma_10.jsp

<body>
<form id="frm">
	값 : <input type="text" name="data" id="data" readonly>
	<input type="button" value="데이터 로드" id="btn">
</form>
</body>

<script type="module">
	//http://172.30.1.5:8080/ecma/popup.jsp
	document.querySelector("#btn").addEventListener("click",function(){
		window.open("./popup2.jsp","","width=400 height=400");
	});
</script>

- popup.jsp : 짝꿍 jsp

<body>
	<span onclick="datacall('java')">java</span><br>
	<span onclick="datacall('html')">html</span><br>
	<span onclick="datacall('ecma')">ecma</span>
</body>
<script type="text/javascript">
	function datacall(z){
    	//자신을 호출한 부모페이지에 postMessage로 배열값으로 전달하는 형태
        // "*"  : 모든 사이트에서 해당 페이지를 로드할 수 있음 
        // "http:///naver.com"  이라면 ? naver가 도메인인데만 접속이 가능
		parent.window.postMessage({msg:z},"*");
	}
</script>

-popup2.jsp

<body>
	<iframe id="msg" src="http://172.30.1.5:8080/ecma/popup.jsp"></iframe>
</body>
<script>
	window.addEventListener('message',function(z){
		window.opener.frm.data.value = z.data.msg;
		self.close();
	});
</script>