JAVASCRIPT STEP 15 - Window

★ Window 객체

• BOM 최상위 객체
• 유일 > 브라우저 창을 참조하는 객체
• window 객체 조작 > 브라우저 창 조작
• 열기, 닫기, 이동하기, 사이즈 조절 등..

window.open(); //부모창 > 자식창 생성
window.close(); //자기 스스로 종료

• 양식

window.open(URL, Name, Options)

• 1. URL : 새창의 URL
• 2. Name : 새창 이름
• 3. Options : 옵션들..
• 실행 ex)

//네이버를 띄우는 open
window.open('https://naver.com','naver', null);

//자식 file을 띄우는 open
window.open('./ex17_child.html', 'child', 'width=300, height=200, left=0, top=0');

• 만약, Name 옵션을 ''이렇게 빈칸으로 주게 되면 새창을 계속 띄우게됨.
• 자식창 참조

var child;

function m1() {

    child = window.open('./ex17_child.html', 'child', 'width=300, height=200, left=0, top=0');

    // alert(child);
}

function m2() {
    //자식창 닫기
    //window.close();
    child.close();
}

• 부모창 참조
• opener : 상위 페이지 참조 

function m2() {
    //부모창의 자원에 접근하기

    //부모 페이지의 window객체가 필요!!
    opener.document.form1.btn3.value = '자식창에서 버튼의 라벨을 조작합니다.';
}

 

■ 다양한 ex)

• 아이디 중복 검사를 하는 코드

function m1() {
    //1. 자신의 텍스트박스 > 부모 텍스트 박스 복사

    //2. 창닫기
    opener.document.form1.txtid.value = txtid.value;

    window.close();
}

 

★ Screen 객체

• window 객체의 자식
• 화면 정보 제공
• 현재 보고 있는 화면의 크기 > 모니터 해상도

console.log(window.screen.availWidth); // 1680
console.log(window.screen.availHeight); // 1025

console.log(window.screen.colorDepth); // 24bit color
console.log(window.screen.orientation); //ScreenOrientation {angle: 0, type: 'landscape-primary', onchange: null}