본문 바로가기
Language/JavaScript

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

by 썸머워즈 2020. 5. 5.
반응형

- 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] 부모,자식 파업창 간의 함수 호출 및 값 전달

- 부모, 자식 팝업창 간의 함수 호출 및 값 전달하기 - 우선 설명보다는 코드를 먼저 살펴보고 그다음에 설명들어가도록 하겠다. ▶parent.html (부모창) ▶child.html (자식창) ..

mine-it-record.tistory.com

반응형


댓글

TOP