웹브라우저 JavaScript

창 제어

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>

팝업 차단

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

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다.^^
  3. tachyon
    감사합니다
  4. egoing
    참고로 좀 더 간단하게는 <meta charset="utf-8">을 넣으시면 됩니다. ^^
    대화보기
    • 혹시 글자가 깨지시는분은
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      이 태그를 html태그 밑에 넣어보시기 바랍니다
    • yihsang
      감사한 마음으로 수강하고 있습니다.
    • JustStudy
      2016.07.07 목
      고맙습니다 3.
    • JustStudy
      2016. 06. 30
      고맙습니다 2.
    • 대부분의 브라우져에서는 보안상의 이유로(same origin policy) 위의 코드를 로컬(서버없이)에서 실습을 못합니다.
      egoing님도 강의에서 언급하신 내용입니다. 서버를 구축하기는 귀찮고 난 꼭 실습을 해봐야 직성이 풀리시겠다는 분들은 브라우져(크롬) 설정을 바꿔서 실행해 주시면 보안 문제를 무시하고 실행 할 수 있습니다.
      (위의 예제는 제가 실행을 안해봐서 안될지도 모릅니다.) 다만 로컬 개발하실때 이와같이 크로스 도메인 문제
      가 생기실때 유용하게 사용할 수 있는 팁입니다.
      크롬의 경우 우클릭 속성에서 바로가기 주소 뒤에
      --allow-file-access-from-file --disable-web-security --user-data-dir 플래그를 추가하면 강제적으로
      크롬 보안정책을 무시하고 실행 할 수 있습니다..
      예를 들어 설치 장소가 default일 때
      c:\Program Files\Google\Chrome\Application>chrome.exe --disable-web-security --user-data-dir="D:\chrome" 요런 느낌으로 추가해 주시면됩니다.
      다만 보안상의 문제를 무시하고 실행하기때문에 꼭! 바로가기를 복사 하셔서 chrome-launcher 이런식으로 이름을 바꿔주신 후 다른 사이트는 들어가시지 마시고 로컬 실습용만으로 사용하시기를 당부합니다.
      사용이 끝나신 후에는 삭제 하시는것을 추천합니다.

      http://stackoverflow.com......-49
      참고했습니다.
    • 사람구실
      전역변수 win의 선언은 따로 해주지 않아도 되는 건가요?

      기존 oop 언어와 다른 건 알겠지만 자꾸 그 습관이 남아서 헷갈리게 됩니다ㅠ
    • 이주환
      2016. 04. 27
      잘보고갑니다~!
    • JustStudy
      고맙습니다
    • 하얀아빠
      자세한 내용은 저도 잘 모르지만
      일단 한글 Code(2바이트 문자) 체계상의 문제로 알고있습니다.
      영문은 'a'를 누르면 글자가 완성된 것이지만
      한글은 'ㅎ'를 입력 했다고 글자가 완성되었는지 컴터가 모릅니다.
      단 자음을 입력한 것인지 '한'을 쓰고 있는 중인지,
      그래서 '스페이스바'나 '엔터'로 글자가 완성되었다는 것을 알려 줘야
      컴퓨터가 알고 동작하는 것으로 알고 있습니다.
      물론 많은 프로그램에서는 이런 부분에 대한 별도 처리를 하고 있겠지만요. ^^
      대화보기
      • 너무 재밌습니다!! 감사합니다!!
      • pillage
        창 제어 부분을 제 나름대로 설명한것입니다..

        아래쪽 태그를 붙여넣기 하시고 아톰과 크롬으로 불러들여서 보시면 도움이 될겁니다.


        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title></title>
        </head>
        <style>li {padding:10px; list-style: none}</style>
        <body>
        <ul>
        <li>
        첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
        <input type="button" onclick="open1()" value="인자생략 새창";">
        </li>
        <li>
        두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br>
        <input type="button" onclick="open2()" value="현재창">
        </li>
        <li>
        _blank는 새 창을 의미한다. (무조건 새창을 띄우게 됩니다.)<br>
        <input type="button" onclick="open3()" value="새창">
        </li>
        <li>
        창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br>
        <input type="button" onclick="open4()" value="동일이름창">
        </li>
        <li>
        세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br>
        창의 크기(높이와너비)와 창크기 조정 여부 조정 가능함.<br>
        현재 조정가능함.(아래 script내의 resizable=yes,no 로 조정 가능함.)<br>
        <input type="button" onclick="open5()" value="속성값 새창"/>
        </li>
        <li>
        ※ 자바 스크립트의 open은 windows 전역객체의 메소드이므로 script에서 windows는 정의하지 않아도 됩니다.
        </li>
        </ul>

        <script>
        <!--window.open 이나 window 개체는 정의하지 않아도 되는 작동하는 전역개체이므로 window 삭제--!>
        function open1(){
        open('https://opentutorials.org/course/2039');
        }
        function open2(){
        open('https://opentutorials.org/course/2039', '_self');
        }
        function open3(){
        open('https://opentutorials.org/course/2039', '_blank');
        }
        function open4(){
        open('https://opentutorials.org/course/2039', 'ot');
        }
        function open5(){
        open('https://opentutorials.org/course/2039', '_blank', 'width=200, height=200, resizable=yes');
        }
        </script>
        </html>
      • shaorin62
        이재영//
        onkeypress 이벤트는 버튼을누를경우 이밴트가 발생합니다. 때문에 키를 쳐야 페이지에서
        팝업창으로 적용됩니다. 치는 순간 text 에 있는 값 (친 값은 못가져 가겠죠?) 을 가져갑니다
        입력과 동시에 갱신을 하시려면 onkeyup 을 하셔야 합니다.
        키를 누르면 입력이 되고 키를 손에서 떼는 순간 text 에 있는 값을 가져가야 원하시는 대로 동작 할거 같네요
      • 코딩!
        유용한 코드네요!
      • 이재영
        두번째 강의에서 한글입력시에는 바로바로 갱신이 안되네요.
        한글입력시 'onkeypress' 이벤트발생을 안하다가 enter를 치면 이벤트가 발생하네요.
        혹시 이부분에 대해서 아시는분 있으시면 간략한 설명 부탁드려요 ㅠㅠ
      • //will
        코드의 개념과 사용법은 저도 이해하고 있지만
        해당 코드를 브라우져가 읽고 나서 지나간 후에도 여전히 코드가 작동하는 이유가 궁금합니다.
        예를들어 버튼을 눌렀을때 인터럽트같은 신호가 발생하는 지 등등..
        대화보기
        • will
          window.open();로 다른 사이트 어떻게여나요??..

          window.open('/http::/www.sitename.com', 'ot')
          실행결과: http://localhost......com

          앞에 http://localhost 지우는법을 모르겠네요...
          대화보기
          • will
            이벤트: '특정 행동'을 했을떄 액션(행동)을 만들어냄
            액션: 특정행동(이벤트)이 발생했을떄 행동함.

            <input type="text" onkeypress="winmessage(this.value)" /> 여기서
            이벤트는 : onekeypress (사용자가 키보드 입력을 했을떄)
            액션은 : winmessage(this.value)함수 호출

            즉 사용자가 text에 키보드를 입력할때마다 winmessage(this.value)함수를 호출함
            대화보기
            • function winmessage(msg){
              win.document.getElementById('message').innerText=msg;
              }
              이 부분으로 다른 창을 제어하는 모습을 보았는데요, while 문 처럼 코드가 반복적으로 실행되지 않는 상황에서도 실시간으로 계속해서 저 코드가 실행 될 수 있는 이유가 궁금합니다.
            • Anna Kim
              두번째 강의에서요
              두번째 함수에 있는 win.document.getElementById('message').innerText=msg;

              여기서 'message'란 아이디는 지금 같은 html상이 아닌 다른 html 파일안에 있는거잖아요. 같은 디렉토리안에서는 자바스크립트는 어느파일이든 접근할수 있다는거네요? 신기하네요.
            • 이용주
              두번째 강의는 이해가 조금 어렵네요 ㅠㅠ 아직 기본기가 많이 부족해서 이해가 않되었나 봐요... 다른 많은 강의를 보고 와야 겠습니다 ^^ ~
            • Youngmin Kweon
              두번째 동영상까지 보고 실습이 잘 되길래
              혹시 다른 사이트도 되나 해서 해보니 안되었는데
              세번째 동영상에서 이유가 나오네요..ㅎ
              웹브라우저 자체 기능으로 막았다면 혹시 웹브라우저 내부 코딩을 바꿔서 한다면 가능한건가요??
              여튼 갈수록 어렵지만 갈수록 재미있습니다. 많이 배우고 감사합니다.
            • 노승현
              좋은 내용 감사합니다.
            • 호두과자
              감사합니다.
            • 육점이
              항상 감사합니다. 많은 것을 배우고 있습니다!!
            • 조천희
              감사^^
            • cccc
              너무 좋아요!!! 고마워요 ㅎ
            • 수림
              창 제어를 처음 배울때는 '어차피 html로 되는거 아닌가' 싶었는데... 배우다 보니 그게 아니였네요 ㅎㅎ 신기하고 재미있네요.
            • 규빈이아빠
              명강의입니다~~
            • rootxy
              좋은 강의 잘봤습니다.
            • Yule_papa
              헉헉... 페북 로긴은 포기 하고 바로 회원 가입 하고 댓글 올리네요 !

              아직 시작도 안했는데 서버와 클라에 대한 내용이 >_< 멋찌내요 !!
            • 음.....열심히 달려가다보면 알게되는 날이 오겠지요?? 명강의와 멋진 음성..늘 감사합니다..복 받으실거여요..
            • powerwithlove
              wow
            • 환글
              좋아요
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기