window.open 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다. 아래는 메소드의 사용법이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!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> |
새 창에 접근
아래 예제는 보안상의 이유로 실제 서버에서만 동작하고, 같은 도메인의 창에 대해서만 작동한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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> |
팝업 차단
사용자의 인터렉션이 없이 창을 열려고 하면 팝업이 차단된다.
1 2 3 4 5 6 7 8 | <!DOCTYPE html><html><body> <script> window.open('demo2.html'); </script></body></html> |
