본문 바로가기
CLASS/기타

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

by hingu 2024. 7. 17.
⚡ 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>

 

팝업에서 클릭시 요렇게 들어감

 

'CLASS > 기타' 카테고리의 다른 글

게시판 작업시 체크  (0) 2024.08.06
CORS 연습방법  (0) 2024.07.19
인증메일 보내기  (1) 2024.07.05
mail 보내기  (0) 2024.07.05
👀⚡  (0) 2024.06.27

관련글

티스토리툴바