power-girl0-0

[BOM] 창 제어 본문

언어/Javascript

[BOM] 창 제어

power-girl0-0 2021. 2. 8. 05:54
728x90

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 window.open( ) 

window.open 메소드는 새 창을 생성한다.

요즘 브라우저는 대부분 탭을 지원하기 때문에, window.open은 새 창을 만든다.

아래는 메소드의 사용법이다.

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

위 소스를 웹브라우저에서 실행시키면 아래와 같이 출력된다.

 

 

 새로운 창을 띄우고, 새로운 창과 커뮤니케이션하는 방법에 대해서 알아보자. 

아래 코드는 보안상의 이유로 실제 서버에서만 동작하고, 같은 도메인의 창에서만 작동한다.

따라서, 아래 코드를 실행하고 싶으면 직접 서버를 만들어서 실행해야 된다.

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

위 코드에서 winopen()함수에서 demo2.html을 새창에 열고, win이라는 전역변수에 window.open의 리턴 값을 넣었다.

즉, 전역변수 win은 demo2.html을 열어준 새로운 창에 대한 window 객체를 가리킨다.

이로 인해 win변수를 이용해서, 같은 페이지에 있는 것처럼 새로 열린 문서를 제어할 수 있다.

 

따라서, winmessage()함수에서 win변수를 통해 demo2.html의 id가 message인 텍스트를 제어할 수 있다.

이로 인해 해당 페이지에서 입력창에 메시지를 입력하면 demo2.html 페이지의 메시지도 똑같이 변경되는 것을 확인할 수 있다.

 

마지막으로, winclose()함수는 close 버튼을 누르면 새 창이 닫히도록 작성한 코드이다.

 팝업 차단 

브라우저를 설치하게 되면, 그 브라우저는 설치된 컴퓨터에 접근할 수 있는 권한을 가지고 있다.

또한, 자바스크립트와 같은 것을 통해서 브라우저의 특정한 파일을 읽어 자신의 사이트로 전송하는 등의 보안취약점으로 인해 브라우저의 보안에 대해서는 중요하다.

위 코드를 실행시키면 웹페이지에 접속하는 동시에 demo2.html이 새창에 열리게 된다.

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

따라서 위 코드를 실행시키면 사용자의 인터렉션이 없이 창을 열리려고 하여서, 팝업이 차단된다.

 

만약, 팝업이 차단되지 않고 그냥 실행된다면 누군가가 window.open객체에 악의적인 파일을 넣어뒀다가 실행되어서 해킹당하는 보안적인 문제가 발생할 수 있다.

 

즉, 사용자에게 팝업창을 열것인지 열지 않을 것인지를 사용자의 책임으로 돌리는 기능이라고 할 수 있다.

하지만 버튼에 window.open을 사용했을 때는 사용자가 버튼을 클릭해서 실행되기 때문에 팝업이 차단되지 않는다.

 

 

 

 

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

[DOM] jQuery  (0) 2021.02.09
[DOM] 제어 대상을 찾기  (0) 2021.02.08
[BOM] Navigator 객체  (0) 2021.02.08
[BOM] Location 객체  (0) 2021.02.08
[BOM] 사용자와 커뮤니케이션 하기  (0) 2021.02.07
'언어/Javascript' Related Articles more
Comments