티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS]- 창 제어(window객체)

blueprint-12 2022. 1. 27. 20:37

window객체는 전역객체이면서 윈도우의 창을 제어하는 객체입니다. 

전역객체로써의 window말고 윈도우의 창을 제어하는 객체로써 알아봅시다. 

window.open 

이 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다.

  • <a target=""> 과 같은 기능을 합니다. 

 

-> 첫번째 인자: 새 창에 로드할 문서의 URL. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어짐

window.open('demo2.html');

-> 두번째 인자: 새 창의 이름(지정되어 있는 이름을 사용 or 직접 지정)

window.open('demo2.html', '_self');
window.open('demo2.html', '_blank');
window.open('demo2.html', 'ot'); //demo2.html 을 ot로 부르겠다는 의미 이건 있어도되고 없어도 됩니다.
  • _self :  스크립트가 실행되는 창을 의미(현재 창에 로드하기) 
  • _blank :는 새 창(새 탭)을 의미합니다. 
  • 창의 이름 직접 지정하기 : open 을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드됩니다. // 이 말은 새 탭이 열리는 것이 아니라 기존에 열린 페이지가 있다면 그곳이 계속 새로고침되는 것 -> 예시 3번째가 이에 해당하는데 아래의 설명을 보면 알다시피 윈도우의 타이틀을 지칭하는 것이 아니라고 말합니다. 즉, demo2.html을 변경하는 것은 아닙니다.  
    • This name can be used as the target for the target attribute of <a> or <form> elements. The name should not contain whitespace. Keep in mind that this will NOT be used as the window's title. //ref: MDN

2번째 인자로 이름이 올 때  //ref: w3c

->세번째 인자: 새 창의 모양과 관련된 속성이 온다. (보안상의 이슈로 잘 사용되지 않는다함)

window.open('demo2.html', '_self','width=200, height=200, resizable=yes');

 

새 창에 접근

※해당 예제는 보안상의 이유로 실제 서버에서만 동작하고, 같은 도메인의 창에 대해서만 작동합니다.

->VSCode Live Server를 통해서 실제로 확인 가능합니다. 불완전하게 작동하지만 실행해 볼 수 있는 것에 의미를 두도록 합시당.

<!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>
  • 이 코드를 실행해보면 demo2.html 이라는 새창이 열리고 그 윈도우 객체를 담은 값을 win이라는 전역변수에 담습니다. 새창의 message로 id가 지정되어있는 div태그의 내용이 기존 창의 입력받는 상자에 입력이 될 때마다 실시간 반영되어 두 페이지가 상호작용을 하게 됩니다.

팝업 차단

-사용자의 인터렉션이 없이 창을 열려고 하면 팝업이 차단된다. 

브라우저를 설치하게 되면 브라우저는 유저의 컴퓨터에 접근할 수 있는 권한을 갖게된다. 어떤 웹사이트에 들어갔을 때도 마찬가지로 우리의 브라우저를 제어할 수 있게되는데 만일 내 브라우저의 특정파일을 읽어서 자신의 사이트로 전달하게 된다면 그것이 바로 보안 취약점이 되는 것이다. 그런 사태를 막기위해 브라우저는 외부 접근을 최대한 차단합니다. 

-> 위의 새 창에 접근하는 예시를 보면 같은 도메인을 공유하고 있기 때문에 즉, 이 웹페이지를 만든 사람이 같은 사람이라는 전제가 성립되기 때문에 같은 도메인의 사이트라면 우리가 자바스크립트를 통해서 원격에 있는 다른 페이지를 제어하는 것이 허용된다. 

 

결론적으로 사이트를 만든 사람이 스크립트를 통해서 자동으로 window.open코드를 이용하여 창을 열 때는 해당 팝업이 차단되고 이것을 열지 말지 여부를 사용자에게 알려줍니다. 하지만 사용자가 직접 클릭이나 버튼을 통해서 도메인이 다른 창을 열 때(window.open)에는 이러한 팝업 경고창이 뜨지 않습니다. -> 이것이 바로 위에서 말한 사용자의 인터렉션이 없이 창을 열 때 차단되는 것을 의미합니다.

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩]-JS Execute context & closure  (0) 2022.02.02
[생활코딩][웹브라우저JS]- HTMLElement, Dom Tree  (0) 2022.01.29
[생활코딩][웹브라우저JS]- Navigator 객체  (0) 2022.01.27
[생활코딩][웹브라우저JS]- Location 객체  (0) 2022.01.26
[생활코딩][웹브라우저JS]- 사용자와 커뮤니케이션 하기  (0) 2022.01.26
댓글