JavaScript popup - 1.window.open()

1.window.open()

 

window.open( url, windowName [,windowFeatures] [,optionalArg4] );

 

1.1.window.open() 함수 문법

  - window.open()은 새 창/새 탭 또는 팝업을 명시한 URL로 열 때 사용하는 함수

  - url : 이동할/보여줄 사이트 주소 링크

  - windowName : 새로열릴 창 이름으로, 동일한 이름의 창이 열려있으면 해당 팝업이 새로고침 되고, 중복되지 않는 창 이름은 새로운 창이 열린다. 

값	설명
_blank	새 창에 열림
_parent	부모 프레임에 열림
_self	현재 페이지 대체
_top	로드된 프레임셋 대체
name(임의의 이름)	새 창에 이름을 지정하여 열림

  - windowFeatures : 생략가능, 선택적인 값으로 창의 크기, 스크롤 여부, 리사이즈 여부 등의 속성/옵션을 지정한다. 일부 기능은 특정 브라우저에서만 작동한다.

옵션 명	값 속성	설명
width	number	창의 가로 (px)
height	number	창의 세로 (px)
left	number	화면 왼쪽에서의 창의 위치 (px)
top	number	화면 위쪽에서의 창의 위치 (px)
scrollbars	boolean(yes/no)	스크롤바 사용 여부
resizable	boolean(yes/no)	창 조절 여부
location	boolean(yes/no)	주소창 표시 여부
fullscreen	boolean(yes/no)	전체 창 여부
menubar	boolean(yes/no)	메뉴바 표시 여부

  - optionalArg4 : 생략가능, 선택적인 값으로 true면 history가 새 화면으로 교체 되고, false이거나 생략되면 새 항목으로 추가

 

1.2.window.open() 함수 예시

  - window.open('www.naver.com/', 'naver', 'width=400, height=600, left=400, top=400');

  - var popup = window.open("", "windowPopup", "width=650, height=450, left=0, top=0");

    popup.document.write("<h1>URL이 없어 비어 있는 새 창에 표시될 텍스트</h1>");

 

다음은 응용편 : 폼으로 submit, 동적 폼으로 팝업창 여러개 오픈, 팝업 배치, 팝업 쿠키 설정 등

도움이 되셨다면 로그인하지 않아도 되는 🤍공감 꾹 눌러주세요^^