window. open
* 새 창 띄우기
1. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.
<input type="button" onclick="open1()" value="window.open('demo2.html');" />
<script>
function open1(){
window.open('demo2.html');
}
</script>2. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.
<input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
<script>
function open2(){
window.open('demo2.html', '_self');
}
</script>
3. _blank는 새 창을 의미한다.
<input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
<script>
function open3(){
window.open('demo2.html', '_blank');
}
</script>4. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.
<input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
<script>
function open4(){
window.open('demo2.html', 'ot');
}
</script>
5. 세번재 인자는 새 창의 모양과 관련된 속성이 온다.
<input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" /> <script> function open5(){ window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no'); } </script>
6. 새 창에 접근 (보안상 문제로 서버 구축을 한 뒤 실습!)
<!DOCTYPE html>
<html>
<body>
//onkeypress 이벤트는 사용자가 입력(this.value)을 완성할 때마다 winmessage(this.value) 함수를 실행
<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />
<script>
/*demo2.html 파일을 ot라는 이름으로 지정하고 새창을 연다. 이때 새로 연 demo2.html파일을 담고있는
새로운 창의 window객체가 리턴되어 win이라 하는 전역변수에 담아진다*/
//새 창에 대한 window객체
function winopen(){
win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
}
// 새로 오픈된 문서의 message라는 이름을 가지고 있는 엘리먼트를 얻어냄.
function winmessage(msg){
win.document.getElementById('message').innerText=msg;
}
function winclose(){
win.close();
}
</script>
</body>
</html>* 새 창을 띄우고 새 창과 커뮤니케이션 하는 방법이다.
* 이번엔 서버를 구축하고 서버 위에 파일을 올린 뒤 같은 도메인을 가지고 있는 서버에서 문서를 열었을때 만 동작
7. 팝업 차단
<!DOCTYPE html> <html> <body> <script> window.open('demo2.html'); </script> </body> </html>
* 사용자의 인터렉션 없이 창을 열려고 하면 팝업이 차단된다.
'WEB > JavaScript' 카테고리의 다른 글
| DOM : HTMLElement, HTMLCollection (0) | 2016.10.14 |
|---|---|
| DOM : 제어 대상 찾기 (0) | 2016.10.14 |
| BOM : Navigator 객체 (0) | 2016.10.14 |
| BOM : Location 객체 (0) | 2016.10.14 |
| BOM : 커뮤니케이션 (0) | 2016.10.14 |