새창을 여는 window.open() 함수 사용법

프로그래밍/자바스크립트 2018. 6. 27. 23:23
반응형

웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이  자바스크립트 window 객체의 open() 함수를 사용하는 것입니다.


1. 문법(Syntax)


var ret = window.open(url, name, specs, replace);


1.1. 반환값(ret)

새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다.


1.2. url

새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다.


1.3. name

새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값을 다음과 같습니다.

- _blank : 새 창에 열립니다. 이것이 기본값입니다.

- _parent : 부모 프레임에 열립니다.

- _self : 현재 페이지를 대체합니다.

- _top : 로드된 프레임셋을 대체합니다.

- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.


1.4 specs

선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정합니다. 사용가능한 값을 다음과 같습니다.


- channelmode=yes|no|1|0 : 전체화면으로 창이 열립니다. IE에서만 동작합니다.

- directories=yes|no|1|0 : (사용되지 않습니다.) 디렉토리 버튼의 표시여부

- fullscreen=yes|no|1|0 : 전체 화면 모드. IE에서만 동작합니다.

- height=pixels : 창의 높이를 지정합니다.(height=600)

- width=pixels : 창의 너비를 지정합니다.(width=500)

- left=pixels : 창의 화면 왼쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

- top=pixels : 창의 화면 위쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

- location=yes|no|1|0 : 주소 표시줄 사용여부를 지정합니다. Opera에서만 동작합니다.

- menubar=yes|no|1|0 : 메뉴바 사용여부를 지정합니다.

- resizable=yes|no|1|0 : 창의 리사이즈 가능 여부를 지정합니다. IE에서만 동작합니다.

- scrollbars=yes|no|1|0 : 스크롤바 사용여부를 지정합니다. IE, Firefox, Opera에서 동작합니다.

- status=yes|no|1|0 : 상태바를 보여줄지 지정합니다.

- titlebar=yes|no|1|0 : 타이틀바를 보여줄지 지정합니다. 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자가 아니면 무시됩니다.

- toolbar=yes|no|1|0 : 툴바를 보여줄지 지정합니다. IE, Firefox에서 동작합니다.



IE11에서 테스트 해본결과 channelmode는 타이틀바가 보이고, fullscreen모드는 타이틀바 없이 창이 떳습니다.



1.5 replace

히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정합니다.


- true : 현재 히스토리를 대체합니다.

- false : 히스토리에 새 항목을 만듭니다.



2. 사용예


- 가장 일반적인 사용예 입니다. popup.html 을 지정된 크기의 창에 팝업 합니다.


var win = window.open("/popup.html", "PopupWin", "width=500,height=600");


- 빈 창을 열고 내용을 동적으로 적습니다.

var win = window.open("", "PopupWin", "width=500,height=600");

win.document.write("<p>새창에 표시될 내용 입니다.</p>");


- 창 컨트롤을 모두 활성화 합니다.

var win = window.open("/popup.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");


반응형

댓글을 달아 주세요

  • Deborah 2018.06.29 06:29 신고  댓글주소  수정/삭제  댓글쓰기

    무엇보다 용어를 잘 알아두는 일이 중요할것 같네요

  • 졍OI 2019.01.10 11:30 신고  댓글주소  수정/삭제  댓글쓰기

    http://joool.tistory.com/215?category=761002
    게시글 참고하고 출처 밝혔습니다, 감사합니다!

  • chickenboys@naver.com 2019.07.02 18:17  댓글주소  수정/삭제  댓글쓰기

    새창열고 post 요청을 보내는 방법이 있을까요?

    • pentode 2019.07.02 19:11 신고  댓글주소  수정/삭제

      빈창을 띄운뒤에 그 창 이름을 타겟으로 submit 하면 됩니다.

      <html>
      <head>
      <title>pop post</title>
      <script>
      function popup() {
      var win = window.open("", "PopupWin", "");
      document.PopForm.submit();
      }
      </script>
      </head>
      <body>
      <button onclick="popup();">팝업</button>
      <form name="PopForm" action="target.html" method="post" target="PopupWin">
      <input type="text" value="TEST" />
      </form>
      </body>
      </html>

  • 두들 2020.10.09 00:31  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.

  • 캡스톤싫어 2021.03.17 10:21  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 창을 띄우거나 크기를 지정하는 코드는 쉽게 알 수 있었는데 어떤 브라우저에서 지원되는지까지는 쓰여있지 않아서 한참 동안 바보같이 크롬에만 했었는데 덕분에 공부가 되었습니다.

  • Eve B_V 2021.04.07 16:10 신고  댓글주소  수정/삭제  댓글쓰기

    글 너무 잘읽었습니다! 저 궁금한점이있는데요 ㅜ window.open는 form형식에서 target으로 연결해줘야만 하나요? ㅜ 혹시 a태그로 연결하는 방법은 없을까요?ㅜ

    • pentode 2021.07.04 11:30 신고  댓글주소  수정/삭제

      window.open() 함수를 자바스크립트입니다. 그러므로 자바스크립트를 실행할 수 있는 모든 곳에서 가능합니다.

      당연히 A 태그에도 사용할 수 있습니다. 아래 처럼 사용하면 됩니다.

      <a href="javascript:window.open(...);">

      그외에도 페이지가 뜰때, 마우스를 클릭할때(onclick 이벤트를 받는 모든곳), 마우스를 올릴때 등 이벤트 함수를 사용할 수 있는 모든곳에서 사용할 수 있습니다.

      도움이 되었으면 좋겠네요.^^

  • 우리들 2021.07.28 20:33  댓글주소  수정/삭제  댓글쓰기

    많은 도움 되었어요.
    감사합니다.

  • 투자하는 감자 2021.11.12 13:07 신고  댓글주소  수정/삭제  댓글쓰기

    새 페이지를 열고 그 새 페이지의 정보를 따올 수 있을까요?
    새 페이지가 영상 페이지일 때 그 영상을 autoplay시키고 그 영상이 끝날때 새 창을 닫는 방법을 알고 싶습니다.

    • pentode 2021.11.13 20:05 신고  댓글주소  수정/삭제

      새 페이지를 열고, 그 페이지를 연 페이지에서 열린 새 페이지의 정보를 따올 수 있습니다. windows.open() 함수의 반환 객체를 사용하여 접근할 수 있습니다.

      하지만, 원하는 새페이지의 영상을 autoplay시키고, 영상이 끝날때 창을 닫는 것은 모두 새 페이지에서 처리하면 됩니다.

      이전 페이지가 열린페이지의 정보를 사용할 필요가 없을것 같습니다.

      문제는 영상을 플레이하는 플레이어를 javascript로 제어할 수 있는가 하는게 문제입니다. 필요한 기능은 다음과 같습니다.

      1. 자바스크립트로 플레이어를 play 시킬수 있다.(페이지의 onload 이벤트에 플레이어를 시작시키면 됩니다.)
      2. 플레이어의 영상이 끝나는 이벤트에 자바스크립트 함수를 등록하여 실행할 수 있다(이게 되면 영상이 끝날때 창을 닫을 수 있습니다).

      마지막으로 사족을 하나 달자면 웹 접근성에 관련된 내용들을 보면 페이지가 시작할때 자동으로 영상을 시작하거나 자동으로 창을 닫는 등의 동작은 하지 않는게 좋다고 했었던것 같습니다.

      영상의 자동 시작은 광과민성증후군을 가진 사람에게 문제가 될 수 있고, 창을 자동으로 닫는 것은 시각 장애가 있는 사람이 그 상황을 인지하지 못할 수 있어서 문제가 될 수 있었던것 같습니다.

      하여튼 기능 구현 성공하길 바랄께요.^^