Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어

Romantic_Developer 2018. 7. 29. 16:30

안녕하세요 영감을 주는 개발자 방민방민입니다.


오늘은 자바스크립트에서 window 객체를 활용하여 창을 제어하는 방법에 대하여 알아보도록 하겠습니다.


1. Window.open


jsPractice.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

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p>hello world</p>
	</body>
</html>


두 html 파일은 반드시 같은 폴더에 위치해 있어야 합니다.

각각의 버튼은 demo2.html 파일을 열게 됩니다. 하지만 window.open 에 오는 인자에 따라 다른 방식으로 demo2 파일을 열게됩니다.


window.open('demo2.html') : 새로운 창으로 오픈



window.open('demo2.html', '_self') : 자기 자신 창에서 오픈 -> 전환


_blank 는 누를 때마다 새로운 창을 오픈하고, ot는 첫번째는 새로운 창을 오픈하고 계속 누를때마다는 한번 열린 창을 갱신합니다.


마지막 size 등을 추가적인 인자로 주면 아래와 같은 결과를 출력합니다.



2. window open 과 상호작용 


jsPractice.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>


위의 예제는 아래와 같은 내용을 출력합니다.


이 예제의 경우 보안상의 문제로 서버위에서만 동작합니다.

jsPractice.html 문서에서의 open 키는 win 이라는 변수위에 새로운 window 창을 객체로 저장하며 창을 open 하고 onkeypress 라는 명령어에 따라 text 창에 입되는 값을 실시간으로 win 창으로 옮겨줍니다.

그리고 close 명령어를 통해 해당 win 창을 종료합니다.


이렇게 하나의 창을 통해 다른 창을 열고, 그 창의 내용을 컨트롤하는 것이 js 통해 가능합니다.



3. 팝업차단


브라우저에서 보안의 문제는 아주 중요한 문제입니다. 그렇기 때문에 사용자와의 인터액션 없이 어떤 브라우저를 자동으로 열려고 하면 브라우저는 자동적으로 팝업을 차단합니다.

<!DOCTYPE html>
<html>
<body>
    <script>
    window.open('demo2.html');
    </script>
</body>
</html>


그렇기 때문에 위와같은 경우 자동적으로 demo2.html 을 열려고 하는 경우이기 때문에 브라우저는 해당 웹문서의 오픈을 차단합니다.


이렇게 오늘은 간단하다 DOM 에서 새로운 창을 열고 그 창과 사용자가 커뮤니케이션 할 수 있도록 하는 내용에 대하여 알아보았습니다.


지금까지 영감을 주는 개발자 방민방민이었습니다.

감사합니다 :)

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용  (0) 2018.07.31
(Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기  (0) 2018.07.30
(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션  (0) 2018.07.27
'Romantic Developer/Web JavaScript' Related Articles more