본문 바로가기

개발일지/JavaScript + jquery

[js] 현재창과 바로 전 창 닫기(self.close/opener.close)

 


하이퍼텍스트를 클릭하면 오른쪽의 새 창이 뜬다. 현재 윈도우 닫기를 누르면 오른쪽의 새 창이 없어지고, 바로 전 윈도우 닫기를 누르면 왼쪽 창이 닫힌다.

 

<newclose.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
	function openWin(){
		window.open("close.html", "subwin", "width=320, height=100");
	}
  </script>
 </head>
 <body>
  <h3>공지사항 창 열기</h3>
  <a href="Javascript:openWin()">창열고 닫기</a>
 </body>
</html>


1. 페이지를 간단하게 만들어준다.
<a>태그를 이용해 하이퍼링크를 만들어주었다. 주소는 자바스크립트의 openWin 함수를 가르키고 있다.

 

2.새창을 만든다.
함수 선언을 하고 window.open 객체와 메소드를 사용하면 끝이다. 가로의 첫번째 큰 따옴표(")는 url주소 넣는 자리, 두번째는 창의 이름, 세번째는 창의 효과들을 써주면 된다. css와 비슷한 구간이다. 

 

 

<close.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <form>
	<fieldset>
		<legend>새로 생성된 윈도우 단기</legend>
		<input type="button" value="현재 윈도우 닫기" onClick="self.close()">
		<!--현재창 닫기-->
		<input type="button" value="바로 전 윈도우 닫기" onClick="opener.close()">
		<!--바로 전 창 닫기-->
	</fieldset>
  </form>
 </body>
</html>

 

window.open에 걸어준 파일로 가보면..

 

self.close() 현재 창을 닫는다.
opener.close() 바로 전 창을 닫는다.