window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기

window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기

자바스크립트에서 window 객체를 활용하면 사용자가 웹페이지에서 새 창 또는 탭을 열 수 있도록 하는 기능을 구현할 수 있습니다. 이번 글에서는 window 객체의 open 메서드를 사용하여 POST 방식으로 새 창 또는 탭으로 여는 방법에 대해서 알아보겠습니다.

▼ window 객체의 주요 속성과 메서드

속성/메서드설명
window.innerHeight브라우저
window.innerWidth브라우저 창의 내부 너비를 반환합니다.
window.outerHeight브라우저 창의 외부 높이를 반환합니다.
window.outerWidth브라우저 창의 외부 너비를 반환합니다.
window.pageXOffset문서가 가로로 스크롤된 픽셀 수를 반환합니다.
window.pageYOffset문서가 세로로 스크롤된 픽셀 수를 반환합니다.
window.alert()알림 다이얼로그를 표시합니다.
window.confirm()확인 다이얼로그를 표시하고, 사용자의 선택에 따라 true 또는 false를 반환합니다.
window.prompt()프롬프트 다이얼로그를 표시하고, 사용자의 입력값을 반환합니다.
window.setTimeout()지정된 시간이 경과한 후 함수를 실행하도록 예약합니다.
window.setInterval()지정된 시간 간격으로 함수를 반복 실행하도록 예약합니다.
window.clearTimeout()setTimeout()으로 예약된 함수 실행을 취소합니다.
window.clearInterval()setInterval()로 예약된 함수 실행을 취소합니다.
window.open()새 창이나 탭을 여는 데 사용됩니다.
window.close()현재 창이나 탭을 닫습니다.
window.moveTo()브라우저 창의 위치를 변경합니다.
window.resizeTo()브라우저 창의 크기를 변경합니다.

1. window.open 메서드 기본 사용법

window.open 메서드는 웹 브라우저에서 새 창 또는 탭을 열기 위해 사용됩니다.

1. 메서드의 기본 구문

window.open(URL, windowName, [windowFeatures]);
  • URL: 새 창 또는 탭에서 열려야 하는 웹 페이지의 URL입니다.
  • windowName: 새 창 또는 탭의 이름입니다. 이 이름을 사용하여 스크립트에서 새 창 또는 탭을 참조할 수 있습니다.
  • windowFeatures: 선택적 인수로 새 창의 기능과 속성을 정의하는 문자열입니다. 예를 들어 창 크기, 위치, 스크롤 바 표시 여부 등을 지정할 수 있습니다.

2. window.open 사용 예제

1. 사용 예제: 버튼을 클릭하면 새 창 또는 탭에서 “BlueShare 블로그” 웹페이지가 열립니다.

<button onclick="openWindow()">BlueShare 블로그</button>

<script>
     function openWindow() {
          // URL: https://blueshare.tistory.com
          // windowName: "blog"
          // windowFeatures: 새 창으로 뜨우기, 크기와 위치 지정
          var uri = "https://blueshare.tistory.com";
          var windowName = "blog";
          var windowFeatures = "width=800, height=600, left=200, top=200";
          
          window.open(uri, windowName, windowFeatures);
     }
</script>


windowName 변수는 새 창의 이름을 지정하는 문자열입니다. 이 이름은 다음과 같은 목적으로 사용됩니다.

  • 창 관리: 이름이 지정된 창은 나중에 같은 이름을 사용하여 참조할 수 있습니다. 즉, 여러 번 같은 이름으로 창을 열려고 하면 새 창이 열리는 대신 기존에 열린 창에 초점이 맞춰집니다. 이를 통해 페이지를 중복으로 열거나 창을 관리하는 데 도움이 됩니다.
  • 창 간 통신: 같은 도메인에서 실행되는 스크립트는 이름이 지정된 창을 통해 서로 통신할 수 있습니다. 이를 통해 여러 창 간에 데이터를 전달하거나 동기화하는 데 사용될 수 있습니다.

POST 방식으로 새 창 열기

1. 보내는 부분 예제 코드

<form name="form">
     <input type="text" id="input1" name="data1" value="value1">
     <input type="text" id="input2" name="data2" value="value2">
 </form>
 <button onclick="openWindow()">POST 방식으로 새 창 열기</button>
 
 <script>
     function openWindow() {
         var form = document.forms["form"];
         form.method = "POST";
         form.target = "openWindow";
         form.action = "http://localhost/asp/asp_06.asp";
         form.submit();
 
         var windowFeatures = "width=800,height=600,menubar=no,toolbar=no,location=no,status=no";
         window.open("", "openWindow", windowFeatures);
     }
 </script>


2. 받는 부분 예제 코드: 서버 측에서 form 데이터를 처리 (예: Classic ASP)

<%
     Dim data1, data2

     data1 = Request.Form("data1")  // 부모창에서 넘어온 값
     data2 = Request.Form("data2")  // 부모창에서 넘어온 값

     Response.Write "data1: " & data1 & "<br>"
     Response.Write "data2: " & data2
%>


3. 실행 결과 화면

POST 방식으로 새 창 열기 사용 예제 실행 결과 화면입니다.


☞ window.open 메서드를 사용하여 웹 브라우저에서 새 창 또는 탭을 열어보는 예제를 알아보았습니다. 이 메서드를 활용하면 사용자에게 더 나은 웹 경험을 제공하거나 다양한 웹 기능을 구현할 수 있습니다.

자바스크립트 기초 이전 게시물

  1. 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
  2. window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
  3. window 객체 타이머 관리: setTimeout과 setInterval 사용 예제


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

동일 카테고리 게시글

위로 스크롤