팝업창이어서

 

 

 

▶ 팝업창 

 

window 객체

html

 

   <div>

    <label for="send_msg">전송 메시지</label>

    <input type="text" id="send_msg">

    <input type="button" value="전송" id="btn_send">

  </div>

  <div>

    <div id="receive_msg">받은 메시지는 여기에 표시됩니다.</div>

 

  </div>

script

 

  <script>

    // 전역 객체(모든 함수에서 사용이 가능함)

    var popup = null;

    function openWindow(){

      // 브라우저 화면의 정중앙에 창 열기, 창 크기는 640px * 480px      

      var width = 640;

      var height = 480;

      var left = (screen.width - width) / 2;

      var top = (screen.height - height) / 2;

      var feature = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;

      // popup이 열려 있지 않으면 popup을 연다.

      if(popup === null || popup.closed){

        popup = window.open('12_popup.html', '', feature);

      }

    }

    function sendMsg(){

      // 12_popup.html 본문을 모두 읽은 뒤 스크립트를 처리할 수 있도록 load 이벤트를 사용함

      popup.addEventListener('load', function(){

        // 12_browser_object.html     →  12_popup.html

        //    <input id="send_msg">   →     <div id="receive_msg"></div>

        popup.document.getElementById('receive_msg').textContent = document.getElementById('send_msg').value;

      })

    }

    document.getElementById('btn_send').addEventListener('click', function(){

      openWindow();

      sendMsg();

    })

  </script>

 

 

 

popup창 새로운 File

css

 

   <style>

    div {

      box-sizing: border-box;

    }

    .wrap {

      width: 615px;

      height: 480px;

      margin: 10px auto;

    }

    .footer {

      border-top: 1px solid gray;

      text-align: right;

    }

  </style>

 

▶  이벤트 대상 : window
      이벤트 타입 : load
      이벤트 설명 : 본문을 모두 읽은 뒤에 이벤트 리스너를 처리하는 이벤트

script

 

  <script>

    addEventListener('load', function(){

      sendMsg();

      closeWindow();

    })

   

    function sendMsg(){

      document.getElementById('btn_send').addEventListener('click', function(){

        // 12_browser_object.html           ←  12_popup.html

        //    <div id="receive_msg"></div>  ←     <input id="send_msg">

        // opener : 현재 창을 열어 준 부모창을 의미함

        opener.document.getElementById('receive_msg').textContent = document.getElementById('send_msg').value;

      })

    }

    function closeWindow(){

      document.getElementById('btn_close').addEventListener('click', function(){

        window.close();

      })

    }

 

  </script>

 

html

 

  <div class="wrap">

    <h1>팝업창</h1>

    <div id="receive_msg">여기에 받은 메시지가 표시됩니다.</div>

    <div>

      <label for="send_msg">전송 메시지</label>

      <input type="text" id="send_msg">

      <input type="button" value="전송" id="btn_send">

    </div>

    <div class="footer">

      <input type="button" value="닫기" id="btn_close">

    </div>

  </div>

 

 

부모와 자식간의 호출방법

부모창 - 부모창은 자식창을 변수에 담아서 변수명으로 호출한다.

자식창 - 자식창은 부모창을 opener로 호출한다

 

 

결과 -> 전송메시지에 hello를 쳐서 팝업창에도 전달됨 

             팝업창 전송 메시지에 안녕하세요를 작성해 기본 페이지에 전달

 

 

왼쪽 페이지 오른쪽 팝업창

 

 

 

 

 

요청결과(응답)를 받을 때까지 새로운 요청을 하지 않는 "동기 전송"