- 버튼을 눌러 새로운 창으로 이동하거나, 현재 창에서 새로운창으로 열어보자.
- 메시지를 입력하고 버튼을 눌러 새로운 창을 열어보자.
- 팝업 생성을 해보자.
<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
<li>
새로운 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
<input type="button" onclick="open1()" value="window.open('demo2.html');" />
</li>
<li>
현재의 창에서 새로운 창으로 이동한다. 즉, _self는 스크립트가 실행되는 창을 의미한다.<br />
<input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
</li>
<li>
_blank는 새 창을 의미한다. <br />
<input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
</li>
<li>
창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
<input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
</li>
<li>
새로운 창을 만드는데 그 창의 크기와 모양에 관련된 속성이 온다.<br />
<input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
</li>
</ul>
<script>
function open1(){
window.open('demo2.html');
}
function open2(){
window.open('demo2.html', '_self');
}
function open3(){
window.open('demo2.html', '_blank');
}
function open4(){
window.open('demo2.html', 'ot');
}
function open5(){
window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>demo.html은 위와같이 작성해주고
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="message">Hello world</div>
</body>
</html>demo2.html은 이와같이 작성해준다.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />
<script>
function winopen(){
win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
}
function winmessage(msg){
win.document.getElementById('message').innerText=msg;
}
function winclose(){
win.close();
}
</script>
</body>
</html>- open이라는 button을 만들고 누르면 winopen()함수로 이동한다.
- onkeypress를 이용하여 text라는 칸에 값을 입력하면 winmessage함수를 호출한다.
- 텍스트 필드에 입력된 값이 this.value가 된다.
- open을 누르면 win이라는 변수에 다음과같이 설정이 되어있다.
- 설정된 새창에서 문법을 다루는 것이므로 win.document~~ 식으로 작성한다.
- 새로 열린 창의 message란 Id를 찾는 것 이므로 demo2.html의 id='message'를 찾아 호출할 것이다.
- close라는 button을 만들고 누르면 wincloser()함수로 이동시킨다.
- winopen(_)
- demo2.html파일을 여는데 크기를 조정한다.
- ot라고 새창의 이름을 정한다.
- winmessage(mag)
- 문서에서 Id가 message인 것을 골라 값을 출력한다.
- winclose()
- 닫는다.
팝업 생성
<!DOCTYPE html>
<html>
<body>
<script>
window.open('demo2.html');
</script>
</body>
</html>'Web Development > JavaScript' 카테고리의 다른 글
| 6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript) (0) | 2022.09.06 |
|---|---|
| 5. 문서 내 특정 요소로 객체 찾기 (JavaScript) (0) | 2022.09.06 |
| 3. JavaScript에서 경고창(alert), 선택창(confirm), 검색창(prompt) 만들기 (2) | 2022.09.05 |
| 2. HTML에서 JavaScript 로드하고 경고창 만들기 (0) | 2022.09.05 |
| 1. JavaScript 실습을 위한 Sublime Text 설치하기 (0) | 2022.09.05 |