웹브라우저 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. ckocko
    상호작용을 보니까 확실히 html이나 css가 아닌 자바스크립트로 제어한다는게 뭔지 느낌이 와요 아직까진 어디서부터 어디까지가 제어인지는 잘 모르겠지만요
  2. 폭스킴
    강의 듣다 졸았나봐요~ 그냥 윈도우창 제목이군요~ 감사합니다. 아마도 opentutorials의 약자인거 같아요 ot ㅎ
    대화보기
    • 범이
      win = window.open('demo2.html', 'ot', 'width=300px, height=500px');

      ot 말씀 하시는 건가요?

      새창의 띄웠을때 윈도우창 제목을 지정하는 부분인데 그냥 아무거나 넣어 주시면 됩니다.

      ot 는 그냥 ot 인걸루 ~ ^^
      대화보기
      • 폭스킴
        ot가 뭐의 약어일까요? over 뭐 일꺼 같은데;; 아시는 분~
      • 유유
        감사합니다.
      • 감사합니다.^^
      • tachyon
        감사합니다
      • 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 자세히 보기