알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

[javascript] 창제어 본문

Web /웹브라우저 객체 API

[javascript] 창제어

백곳 2017. 8. 19. 13:47

[javascript] 창제어


사용중인 웹브라우져의 창을 제어할때 어떻게 제어하는지 알아 보겠습니다. 


먼저 windwos.open() 함수는 새로운 창을 여는 함수 입니다. 


newopenhtml.html

<!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>


그리고 demo2.html 을 newopenhtml.html 이 있는 폴더에 만들어 줍니다. 

demo2.html

<!DOCTYPE HTML>
<html>
<body>
	<h1>test</h1>
</body>
</html>


window.open('demo2.html')을 눌러을때

또한 이렇게 새로 open창 에 대해서 객체로 접근을 할수도 있습니다.


새 창에 접근


newopenhtml.html


<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="button" value="close" onclick="winclose()" />
    <script>
    function winopen(){
        win = window.open('demo2.html','ot', 'width=300px, height=500px');
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>


을 다음과 같이 작성하고 close 버튼을 누르면 새창이 닫힘니다. 



'Web > 웹브라우저 객체 API' 카테고리의 다른 글

HTMLElement  (0) 2017.08.30
DOM 제어대상 찾기  (0) 2017.08.21
[DOM,BOM,javascript] 객체 제어 하기  (0) 2017.08.19
[javascript] alert,confirm,prompt 사용하기  (0) 2017.08.19
[DOM,BOM,javascript] 전역객체 윈도우  (0) 2017.08.19
공유하기 링크
'Web /웹브라우저 객체 API' Related Articles more
Comments