[JavaScript] window.open 함수를 사용한 윈도우 팝업 창 띄우기

- window.open 함수를 사용한 팝업 창 띄우기 -

---

개발을 하다보면 꼭 한번쯤은 팝업창을 띄우기 마련인데

여기서도 많이들 갈리는게

윈도우 팝업을 띄워야만 하는 기능이 있고 레이어 팝업을 띄워야만 하는 기능이 존재한다.

 

사실 레이어 팝업 자체는 그냥

간단하게 <div> 태그와 css를 활용하여 만드는게 전부라 따로 정리해둘건 없고

 

이번 게시글에서는 window.open 함수에 대해 알아보고자 한다.

 

구문은 다음과 같다

var windowPop = window.open(url, windowName, [windowFeatures]);

 

window.open 함수 매개변수의 역할에 대해 알아보자.

---

▷var windowPop 변수 (반환값)

  - 새로 만든 window popup 창의 객체이며 반환값이 없으면(윈도우를 열 수 없으면) null을 리턴한다.

  - 새 창의 특성 및 메소드에 액세스하는데 사용될 수 있다. (부모 자식창 간의 연동)

  - windowPop.close(), windowPop.focus() 등으로도 사용할 수 있다.

 

▷url (주소 매개변수)

  - 새 창이 보여질 주소이며 값이 비어있을 경우 빈창이 보인다.

  - '/popup/popOne.html', '/cmmn/personPopup.do' 등과 같이 사용할 수 있다.

 

▷windowName (팝업이름 매개변수)

  - 새로 열릴 팝업창의 이름을 지정한다.

  - 동일한 이름의 팝업창이 열려 있을 경우 해당 팝업창의 내용이 초기상태로 바뀐다. (팝업창이 새로 열리지 않고 원래 열려있던 팝업창을 대상으로 실행한다.)

  - 이름이 다를경우 팝업창이 새로 열린다.

 

▷windowFeatures (팝업 옵션)

  - 선택적인 값으로 창의 크기, 스크롤, 리사이즈 가능 등의 속성을 지정한다.(선택적으로 사용가능하다 하지만 대부분 옵션을 넣고 사용하긴 한다.)

  - 주로 사용되는 옵션은 다음과 같다. (일부 기능은 특정 브라우저에서만 작동한다.)

옵션 명	값 속성	설명
width	number	창의 너비 값(px)
height	number	창의 높이 값(px)
left	number	창의 화면 왼쪽에서의 위치(px)
top	number	창의 화면 위쪽에서의 위치(px)
scrollbars	boolean(yes/no , 1/0)	스크롤바 사용 여부
resizable	boolean(yes/no , 1/0)	창 조절 여부
location	boolean(yes/no , 1/0)	주소창 표시 여부
...

참고 : https://developer.mozilla.org/ko/docs/Web/API/Window/open

---

▶예시 1) window.open() 안에 전부 작성하기

window.open('windowOpen.html', 'windowPop', 'width=400, height=600, left=400, top=400, resizable = yes')

 

▶예시 2) 함수로 빼내어 공통으로 사용하기

function openPopUp(url, name){

  //공통 옵션일 때만 이렇고 서로 다른 옵션일경우 그것도 매개변수로 받자
  var options = 'width=500, height=600, top=30, left=30, resizable=no, scrollbars=no, location=no';
  window.open(url, name, options);

}

---

추가적으로 부모 자식간의

연동에 대해 정리한 글이 있으니 참고하도록 하자.

 

부모 자식 간 호출 및 값 전달

[JavaScript] 부모,자식 파업창 간의 함수 호출 및 값 전달