1. 현재 보고 있는 창 닫기<hr>
현재 창 닫기는 window.close() 함수를 사용하면 된다. 사용자가 특별히 만들지 않아도 그냥 불러 사용하면 되는 함수를 윈도 내장함수라고 한다든가? 그런 정도로 알면 된다.
<html>
<head>
</head>
<body>
<input type="button" value="현재창 닫기" onClick="window.close()">
</body>
</html>
위 소스를 입력하고, ex014_01.htm으로 저장한 후 돌려보자. 버튼을 클릭하면 경고창이 뜬다.
[예] 하면 현재 창이 닫긴다. 나모 [미리보기]에서 태스트하면, 버튼이 사라지고 빈 창만 남을 것이다.
2. 새 창 열고, 현재 창 닫기
ex014_01.htm을 다른이름으로 ex014_02.htm이라고 저장한 후 소스 5줄을 다음과 같이 수정하자.
<input type="button" value="새 창 열고 현재 창 닫기" onClick="window.open('ex005_01.htm'); window.close()">
[미리보기] 또는 저장한 후 돌려보자. 경고창이 뜨면서 현재 창이 닫히고 나면 새로 연 창만 남을 것이다.
3. 조용하게 창 닫기
현재 창을 닫을 때 경고창이 뜨는 것은 없앨 방법은 없을까? 다음 소스를 ex014_03.htm으로 저장하자(이 소스는 자스코의 초보자용 필수 스크립트 중 Window/Frame 관련 자료에서 베껴온 것이다).
<html>
<head>
<title>조용하게 창닫기 </title>
</head>
<body>
<object id=window type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
<a href="#" onClick="window.Click();">조용하게 창닫기</a>
</body>
</html>
나모에서라면 [미리보기] 하기 전에 모든 파일을 저장하자. 그리고 돌려보자. 나모까지 닫혀 버릴 것이다. 이런 소스 하나를 발견하면 자스코에 유료로 가입한 것이 아깝지 않다는 생각을 다시 하게 된다.
4. 열었던 팝업창 닫기
다음 소스를 ex014_04.htm으로 저장한 후 돌려보자.
<html>
<head>
<title>팝업창 열고 닫기</title>
</head>
<body>
<script>
function popOpen(url) {
pop = window.open(url)
}
</script>
<input type="button" value="팝업창 열기" onClick="popOpen('ex005_01.htm')">
<p>
<input type="button" value="팝업창 닫기" onClick="pop.close()">
</body>
</html>
[팝업창 열기] 단추를 클릭하면 팝업창이 떠서 ex005_01.htm 파일의 내용을 보여준다. [팝업창 닫기] 단추를 클릭하면 열려 있는 팝업창을 닫아 버린다. 그런데 한 가지 중요한 문제가 있다. 팝업창을 열지 않은 상태에서 [팝업창 닫기] 단추를 클릭하면 에러가 뜬다는 사실이다. "pop이 정의되지 않았다"는 오류인데, 당연히 생겨야 되는 오류이다.
태어나지도 않은 놈을 죽이라 하니, 총구를 어디로 겨누어야 할 것인가? 이 문제를 해결할 방법은 아직 찾지 못하였다. 실력이 되어서 방법을 찾으면 이 자리에서 찾아볼 수 있도록 링크를 시켜 두겠다.
5. 프레임셋 닫기
프레임셋을 닫으려면 창 하나 닫는 window.close()로 끝나지 않는다. 창 둘을 닫고 프레임셋까지 닫아야 된다.
parent.close()
window.close()
self.close()
이렇게 해 주면 프레임셋을 닫을 수 있다.
6. 메인 창을 열면서 팝업(광고) 창 띄우기
지금까지 착실히 실습해 왔으면 간단하게 생각할 수 있는 문제이다. ex014_04.htm을 다음과 같이 수정하여 ex014_05.htm으로 저장하고 돌려보자.
<html>
<head>
<title>팝업창 열고 닫기</title>
<script>
function popOpen(url) {
pop = window.open(url,'','left=400,top=300,width=400,height=200')
}
</script>
</head>
<body onLoad="popOpen('ex005_01.htm');">
<input type="button" value="팝업창 닫기" onClick="pop.close()">
</body>
</html>
잘 돌아가지만, 역시 팝업창이 닫힌 후에 다기 [팝업창 닫기]를 하면 에러가 생긴다. 이 문제를 해결할 능력이 생기기 전까지는(그런 능력이 생긴 후에라도 더 낫다면), 창 닫는 일은 활성화된 그 창에 맡겨두자. 꿩 잡는 게 매다!
7. 메인 창을 닫으면 팝업(광고) 창 띄우기
어떤 사이트를 가 보면 들어갈 때와 나올 때마다 광고를 띄우는 경우가 있다. 메인 창을 닫을 때 팝업 창을 띄우려면 위의 소스를 한 줄만 고치면 그만이다. 위 예제를 ex014_06.htm(다른이름)으로 저장하고 아래 두 줄 내용만 수정하자.
<body onUnLoad="popOpen('ex005_01.htm');">
이 창을 닫으면 광고를 보여 드립니다.
[미리보기]에서 ^F4를 누르면 편집창이 닫히면서 팝업이 뜬다. 탐색기에서 돌려보라. 브라우저의 뒤로가기(<=)를 선택하여 페이지를 닫아도 결과는 마찬가지로 나올 것이다.
다음과 같이 하면 페이지를 열 때, 닫을 때 모두 광고를 띄울 수 있다.
<body onLoad="popOpen('ex005_01.htm');" onUnLoad="popOpen('ex005_01.htm');">
8. 일정시간 후 자동으로 팝업창 닫기
다음 소스를 입력하고 ex014_08.htm으로 저장하자.
<html>
<head>
<title>팝업창 자동으로 닫기</title>
</head>
<body onLoad="setTimeout('window.close()',2000);">
<p>이 창은 2초 후에 자동으로 닫힙니다.</p>
</body>
</html>
ex014_06.htm을 다음과 같이 수정한 후 ex014_07.htm(다른 이름)으로 저장하고 돌려 보자.
<html>
<head>
<title>광고창 띄우기</title>
<script>
function popOpen(url) {
pop = window.open(url,'','left=400,top=300,width=400,height=200')
}
</script>
</head>
<body onLoad="popOpen('ex014_08.htm');" onUnLoad="popOpen('ex014_08.htm');">
<p>이 창을 열고 닫을 때마다 광고를 보여 드립니다.</p>
</body>
</html>
[미리보기]를 하면 팝업창이 열렀다가 2초 후에 사라지고, [편집]으로 뺘져나와도 팝업창이 열렸다가 2초 후에 사라질 것이다. 탐색기에서 실행하고 닫을 때도 물론 마찬가지의 결과가 나온다.
9. 일정시간 후 자동으로 팝업창 닫기
새 파일을 만들고 다음 소스를 입력한 후 ex014_09.htm으로 저장하고, 돌려 보자.
<html>
<head>
<title>새 창에 텍스트를 보여주기</title>
<script>
function popOpen() {
pop = window.open('','','left=400,top=300,width=400,height=200');
pop.document.write('<html><head><title>팝업공지</title><head><body>이 글은 직접 입력하는<br>안내문입니다.</body></html>');
}
</script>
</head>
<body>
<input type=button onClick="popOpen();" value='안내문을 보여 드립니다.'>
</body>
</html>
잘 보면, 이렇게도 할 수 있다는 것이지, 실제로는 팝업창에 어떤 파일을 보여주는 것과 다를 바가 없다
출처를 남깁니다.
'웹문서 공부' 카테고리의 다른 글
| 입력한 텍스트 url로 이동 (0) | 2015.04.22 |
|---|---|
| 웹페이지 바로 닫기 스크립트 (0) | 2015.04.10 |
| [XE] 엑박 주소 바꾸기 (0) | 2015.03.23 |
| [XE]서브도메인 생성/연결방법 (1) | 2015.03.19 |
| [XE]등록된 글의 작성자 일괄변경 방법 (0) | 2015.03.19 |
