프로그래밍/자바스크립트

[자바스크립트] window.open() 속성 및 사용법

오치리일상 2017. 8. 23.

   window.open()

 

윈도우 새창을 생성할 때 호출한다.

 

자식 윈도우로 접근할 수 있다.

 

 

 

 

  새창 (자식)윈도우 생성

 

window.open([URL], [NAME], [FEATURES], [REPLACE]);

 

[URL] : 새창으로 띄울 웹 페이지 주소

[NAME] : 새창 이름

[FEATURES] : 새창의 옵션(크기, 위치, 메뉴바 등의 옵션 설정)

[REPLACE] : 히스토리 리스트 옵션 

 

 

사용 예

 

var childWindow01 = window.open('', 'child01', 'top=100px, left=100px, height=500px, width=500px');  childWindow01.document.write('자식창 childWindow01'); childWindow01.document.write('<br><br>'); childWindow01.document.write('자식window는 window 생성시 받은 객체로 접근할 수 있다.');

 

 

윈도우 생성시(window.open) 반환 받은 객체(여기서는 childWindow01)로 자식 window에 접근할 수 있다.

 

 

 

출력값

 

 

 

 

 

 

 

  [FEATURES] 옵션값에 따른  window 모양

 

필요한 옵션만 사용 가능하다.

 

※ 주의 : 크롬에서 실행 시 옵션이 제대로 안 먹힐 때가 있음. 익스플로러 11 버전에서는 정상 동작.

 

사용 예

 

// [REATURES] 매개변수 옵션값은 'yes/no' 또는 '1/0'으로 설정할 수 있다. // [REATURES] 매개변수 옵션값을 모두 'yes' 줬을 때  var childWindow02 = window.open('http://www.naver.com', 'child02', 'top=200px, left=200px, height=700px, width=700px, location=yes, menubar=yes, resizable=yes, status=yes, toolbar=yes, scrollbas=yes, fullscreen=yes');  // [REATURES] 매개변수 옵션값을 모두 'no' 줬을 때  var childWindow03 = window.open('http://www.naver.com', 'child03', 'top=500px, left=500px, height=700px, width=700px,, location=0, menubar=0,  resizable=no, status=no, toolbar=no, scrollbas=no, fullscreen=no'); 

 

 

출력값

 

 

 

옵션값을 모두 'no' 줬을 때

 

 

 

 

 

옵션값을 모두 'yes' 줬을 때

 

 

 

*관련글 보러가기 링크(클릭하시면 관련 글로 연결됩니다.)

 

[자바스크립트] 예외 처리 - try catch finally 문

[HTML] <body></body>태그 속성에 대해 알아본다.

[HTML] font 태그 속성 - <font></font>

[HTML] marquee와 그 속성 - <marquee></marquee>

[HTML] 목록 태그 - <ol><ul><dl>

[HTML] 문단/문장에 사용되는 태그들

[HTML] marquee와 그 속성 - <marquee></marquee>

[HTML] 문단 태그 -<br><p><hr><h>

[HTML] <body></body>태그 속성에 대해 알아본다.

[자바스크립트] 예외 처리 - try catch finally 문

[자바스크립트] 문서 객체 가져오기

[자바스크립트] window.moveBy() window.moveTo() - window 이동하기

[자바스크립트] Date 객체 및 D-day(디데이 날짜 및 시간 계산

[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()

[자바스크립트] window.resizeTo(), window.resizeBy() - 윈도우 크기 변경

[자바스크립트] window.open() 속성 및 사용법

[자바스크립트] Math 객체 메소드

자바스크립트 Array 객채의 메소드 사용에 대해 알아보자

자바스크립트 String 객체 메서드

자바스크립트 객체(object)

자바스크립트 내장 함수

자바스크립트 함수에 대해 정리해 보자

자바스크립트 반복문 (while문/do while문/for문) 

배열 선언/사용/추가/삭제

자바스크립트(javascript)에서 alert(경고창/메시지박스) 사용 예

댓글

💲 추천 글