웹브라우저 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. 주황버섯
    23.02.19 수강완료
  3. 여러번 들어야겠어요!
    좋은 강의 감사합니다.
  4. 헤밍웨이
    220825 그래서 팝업이 차단되는 거군요!
  5. 임앤강
    2022-02-07 수강하였습니다.
  6. pmxsg
    2021.12.20 수강
  7. 드림보이
    2021.12.17. 창 제어 파트 수강완료
  8. 경이
    211117 완료
    감사합니다
  9. labis98
    20210907 좋은 강의 감사합니다.
  10. 노성훈
    좋은 강의 감사합니다 항상 잘듣고있습니다
  11. 서버 구축이 힘드시다면 vscode의 live server 플러그인을 설치하셔서 하는 방법도 있겠네요
  12. 박병진
    2020.12.02 완료
  13. 현미쓰
    11/16 복습 ㅎ.ㅎ
  14. 11/13
  15. nurunzii
    실시간 입력이라니 너무 아름다워요.. 알파고도 머신러닝도 없던 묘하게 옛날같은 시절에.. 요즘에는 구글님께서 크롬 개발자 도구에서도 html 갱신을 실시간으로 반영해 주신답니다
  16. anne
    완료
  17. open 구조를 알고 있다면 브라우저 해킹이 가능하겠네요
  18. open 구조를 알고 있다면 해킹이 가능하겠네요
  19. 김진욱
    완료
  20. 한강
    좋은 아침입니다~~^^!
    200625
  21. 쑤우
    완료. 감사합니다~
  22. Useok
  23. 현수
    감사합니다
  24. 2019-10-13 9:04pm 완료
  25. 정홍
    완료
  26. 오타
    onkeypress 오타화긴해보세영
    대화보기
    • 이드
      <!DOCTYPE html>
      <html lang="en">
      <head>

      </head>
      <body>
      <input type="button" value="open" onclick="winopen();">
      <input type="text" onkeypree="winmessage(this.value);">
      <input type="button" value = "close" onclick="winclose();" >



      <!-- <script src="test2.js"> -->
      <script>
      var win;
      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>


      코드를 이렇게 작성했는데, 코드는 영상에 나온것과 완전히 같습니다.
      그런데 winmessage()함수 부분이 실행이 안되네요.
      창은 뜨고, 꺼지는데,
      제가 입력하는 텍스트가 창에 뜨지 않습니다.
      기본 텍스트로 입력한 Hello world만 떠있고 바뀌지 않습니다.
      뭐가 잘못된 걸까요?
      혹시 몰라서 var 선언까지 해봤는데도 여전히 똑같네요.
    • 핼리오
      var 없이 변수 선언을 하면 전역변수로 되기 때문에 다른 함수에서 접근이 가능한 것 같습니다.
      단, "use strict"; 선언시에는 var 없이 변수 선언이 안되는 것 같아요.
      대화보기
      • 지나가다
        안녕하세요. 너무 좋은 강의 잘 듣고 있다가, 이해가 가지 않는 부분이 있어서 질문합니다.

        1. 처음에 변수 win이 설정 되었을 때 왜 var가 지정이 안되었는지 궁금합니다.
        2.
        위의 코드 예제에서 변수 win은 펑션 안에서 설정되었으니, 지역변수인데, 두번째 와 세번째 함수에서 win.document, 그리고 win.close() 방식으로 어떻게 접근이 가능한지 궁금합니다.


        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();
        }
      • 자바스크립트에서 사용자에 의지가 아닌 개발자의 의지로 창이 넘어가게 되면 팝업이 뜬다고 하셨는데
        버튼을 눌러서 사용자에 의지를 설명하신 것은 이해했습니다
        그런데 링크값을 입력하고 넘어가는것도 사용자의 의지아닐까용?
      • 미완성
        20190109
      • JuicyFresh
        감사합니다
      • SlowStarter
        감사합니다!
      • pepcilia
        2번째 예제에서 입력시 첫번째 키가 씹히는데 이건 어떻게 해결하나요? 원인은 무엇인가요 ?
      • 아인
        덕분에 복습 제대로 해 봅니다.
        감사^^
        대화보기
        • 생선과고양이
          20140424 감사합니다.

          알듯말듯 아리송 한부분 있네요
        • An TaeHyeon
          18-01-24 수강완료!
          강의록 공유합니다 :)
          https://goo.gl/ZhVh9B
        • 박인호
          12-27
          수강완료.
        • 김진형
          저도 아침해 님의 소스를 보니 헷갈리는 부분이 있어 생활코딩의 다른 수업을 찾아보았습니다.
          https://opentutorials.org......571 (언어 > javascript 의 this 라는 주제에 대한 수업입니다.)

          저는 이 수업을 보고 아침해 님의 첫번째 소스가 왜 동작하지 않는지 이해하게 되었습니다.

          처음에 저는 첫번째 소스에 있는 winmessage function의 this.value라는 부분이 이해가 되지 않았습니다.
          왜냐면 소스 상에는 한번도 현재 객체(= this : 아마 window?)에 value라는 속성에 값을 할당한 적이 없습니다.
          그렇기 때문에 할당되지 않은 그 값으로 innerText를 변경해봤자 정의 되지 않은 값인 undefined가 나온다고 생각 했습니다.
          그래서 테스트를 해봤습니다. 소스에 아래 부분을 추가해봤습니다.

          this.value = " test";
          이후 코드를 돌려보니 키 입력이 발생한 이후에는 항상 "test"라는 문구로 나오는것을 확인하게 되었습니다.

          그래서 소스를 한번 변경해봤습니다.
          1. 버튼 태그에 id를 주고
          2. winmessage function에서는 태그 객체를 가져와 사용해봤습니다.

          1. <input type="text" onkeypress="winmessage()" id="txtInput" />
          2.
          function winmessage(){
          var txtInput = document.getElementById("txtInput");
          win.document.getElementById('message').innerText=txtInput.value;
          }
          그랬더니 제가 원하는 동작이 되었습니다.

          저도 지금은 javascript를 처음배우고 있기 때문에, 이 설명이 맞는지 확신하지 못합니다.
          만약 틀리다면 다음 선배님께서 더 좋은 설명을 해주실것 같습니다. ^^
          대화보기
          • 수복
            현재 쭉 흩어보기로 정주행 중 입니다. 감사합니다.
          • publicum
            제 생각에는 이고잉님의 원래 코드의 경우 input되는 text와 JavaScript사이에 논리적 연결고리가 존재하는 반면에, '안되는 코드'에서는 그런 고리가 존재하지 않기 때문이 아닐까 싶습니다.

            우선 '안되는 코드'를 보니까, 아마도 input 태그에서 입력된 값(this.value)이 JavaScript의 winmessage 함수 정의 부분까지 유효하게 전달될 것이라고 기대하신 것 같아요. 그런데 두번째 input 태그에서 키보드를 입력한 값은 해당 태그 안에서만 this.value라는 표현으로 불러올 수 있기 때문에, 아래 JavaScript 부분은 this.value가 무얼 의미하는지 파악하지 못하게 됩니다. 그래서 그 부분이 'undefined', 즉 정의되지 않았다는 에러가 출력되는 거죠. 반면, input 태그에서 onkeypress항목은 winmessage()함수를 입력값(this.value)과 관련짓지 않은 채, 그대로 호출하고 있고요.

            이고잉님의 원래 코드로 돌아가보면 onkeypress="winmessage(this.value)"에서 키보드입력시 실행될 함수를 입력값 'this.value'과 관련지어 호출하고 있습니다. JavaScript상의 함수선언에서 winmessage(msg)가 'msg'라는 입력값을 포함해서 정의되어있으므로 input 태그에 입력된 값 this.value가 함수 상에서 가지는 논리적 의미 혹은 역할이 분명합니다.

            아침해님의 '되는 코드'는 기본적으로 이 연결고리를 만들기 위해 input tag에 특정한 id를 부여하고 그 아이디에서 발생한 이벤트의 키보드 입력값을 가져오라-는 명령을 준 거잖아요. 다시말해, input 태그의 this.value라는 약속된 표현을 사용하는 대신 같은 기능을 JavaScript로 조금 더 복잡하게 구현한 셈이죠.

            (키보드 입력값(this.value)이 JavaScript부분까지 왜 전달되지 않는지를 쉽게 이해하는 방법은 HTML에 비슷한 텍스트 입력창이 여러개 존재하는 상황을 상상해보는 겁니다. 각각의 input 태그에서 입력한 값을 나름대로 this.value라는 이름으로 호출하도록 약속을 했는데 이게 태그 넘어서까지 유효하다면 의미가 서로 섞여서 곤란하겠죠.)
            대화보기
            • 아침해
              winmessage 함수를 호출할 때 인자로 this.value를 넘기지 않고

              winmessage 함수의 내용에서 id가 message인 태그가 this.value의 값을 입력하도록 하면
              ( win.document.getElementById('message').innerText=this.value; )

              1. undefined가 뜨던데 그 까닭이 궁금합니다.
              잘 안되는 코드는 아래와 같습니다.

              <!DOCTYPE html>
              <html>
              <body>
              <input type="button" value="open" onclick="winopen();" />
              <input type="text" onkeypress="winmessage()" />
              <input type="button" value="close" onclick="winclose()" />
              <script>
              function winopen(){
              win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
              }
              function winmessage(){
              win.document.getElementById('message').innerText=this.value;
              }
              function winclose(){
              win.close();
              }
              </script>
              </body>
              </html>


              인풋 텍스트 태그에 onkeypress="winmessage()"를 빼고 script에서 인풋 텍스트를 변수에 담고 이벤트를 걸었더니 작동을 하네요.


              2. 이런 차이가 왜 생기는지 궁금합니다.

              되는 코드는 아래와 같습니다.
              <!DOCTYPE html>
              <html>

              <body>
              <input type="button" value="open" onclick="winopen();" />
              <input type="text" id="orgmessage" />
              <input type="button" value="close" onclick="winclose()" />
              <script>
              var orgmessage_o = document.getElementById('orgmessage');
              orgmessage_o.addEventListener('keypress', winmessage);

              function winopen() {
              win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
              }

              function winmessage() {
              win.document.getElementById('message').innerText = this.value;
              }

              function winclose() {
              win.close();
              }

              </script>
              </body>

              </html>
            • Sangmook Kim
              170727 완료
            • crable
              감사합니다
            • 홍상구
              박수를 치면서 강의를 듣고 있습니다!! 감동과 소름이 동시에..
            • matheios
              감사합니다... 어느 순간 부터는...어려워지는군요...^^;; 제가 이해력이 부족한듯...합니다...ㅠㅠ
            • handung_papa
              감사합니다~
            • ckocko
              상호작용을 보니까 확실히 html이나 css가 아닌 자바스크립트로 제어한다는게 뭔지 느낌이 와요 아직까진 어디서부터 어디까지가 제어인지는 잘 모르겠지만요
            • 폭스킴
              강의 듣다 졸았나봐요~ 그냥 윈도우창 제목이군요~ 감사합니다. 아마도 opentutorials의 약자인거 같아요 ot ㅎ
              대화보기
              • 범이
                win = window.open('demo2.html', 'ot', 'width=300px, height=500px');

                ot 말씀 하시는 건가요?

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

                ot 는 그냥 ot 인걸루 ~ ^^
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기