본문 바로가기
클라이언트/JavaScript
[자바스크립트(JavaScript)] BOM(Window, Screen, Location, History)
Hana_h 2023. 4. 24. 10:56

 // window 객체

    - BOM 트리 구조의 최상위 객체
    - 브라우저 창을 참조하는 객체
    - window 객체 조작 > 브라우저 창 조작
    - 열기☆, 닫기☆, 이동하기, 사이즈 조절 등
    
    ~ window.open(URL, Name, Options); //부모창 > 자식창 생성
        1. URL: 새 창의 URL
        2. Name: 새 창 이름 (이름을 비워두면 계속 새 창이 뜨고, 그렇지 않으면 새로고침 된다.)
        3. Options

    ~ window.close(); //자기 스스로 종료
   
    - 부모창에서 자식창을 조작하려면, 변수를 선언한 후 open할 때 변수에 담는다.

    - 자식창에서 부모창을 조작하려면, opener라는 예약어를 사용한다.

- 부모창에서 자식창 조작

var child; //변수 선언

child = window.open('./ex17_child.html', 'child', 'width=300 height=200, left=0, top=0'); //변수에 자식 window 객체 담기
    
child.document.form1.txt1.value = '부모창에서 왔습니다.'; //자식 window 객체 조작

- 자식창에서 부모창 조작

function m2() {
    //부모 창의 자원에 접근하기
    //부모 창의 window 객체 필요 > opener라는 예약어!

	opener.document.form1.btn2.value = '부모창을 조작합니다.'
}

- window 조작 전체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    
    <h1>window 객체</h1>
    <form name="form1">
        <fieldset>
            <legend>창 제어</legend>
            <input type="button" value="자식창 띄우기" name="btn1" >
            <input type="button" value="자식창 닫기" name="btn2" >    
            <hr>
            <input type="button" value="자식창 조작하기" name="btn3" >    
        </fieldset>

        <fieldset>
            <legend>아이디</legend>
            <input type="text" name="txtid" size="10">
            <input type="button" value="중복검사" name="btncheck">
        </fieldset>
    </form>
    
    <script>
        
        var btn1 = window.document.form1.btn1;
        var btn2 = window.document.form1.btn2;
        var btn3 = window.document.form1.btn3;
        var btncheck = window.document.form1.btncheck;

        var child;
        
        btn1.onclick = m1;
        btn2.onclick = m2;
        btn3.onclick = m3;
        btncheck.onclick = m4;

        function m4() {
            window.open('ex17_idcheck.html', 'check', 'width=300, height=200')
        }

        function m3() {
            child.document.form1.txt1.value = '부모창에서 왔습니다.';
        }

        function m1() {

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

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

            // alert(child);
        }
        
        function m2() {

            //자식창 닫기
            
        }
        
    </script>
    
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자식 페이지</h1>

    <form name="form1">
        <input type="button" value="창닫기" name ="btn1">
        <hr>
        <input type="text" name="txt1">
        <hr>
        <input type="button" value="부모창 조작하기" name="btn2">
    </form>

    <script>
        
        var btn1 = window.document.form1.btn1;
        var btn2 = window.document.form1.btn2;

        btn1.onclick = m1;
        btn2.onclick = m2;

        function m1() {
            window.close();
        }

        function m2() {
            //부모 창의 자원에 접근하기
            //부모 창의 window 객체 필요 > opener라는 예약어!

            opener.document.form1.btn2.value = '부모창을 조작합니다.'
        }

    </script>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form name="form1">
        <label>
            아이디:
            <input type="text" name="txtid" size="10">
            <input type="button" value="중복검사" name="btncheck">
        </label>
        <hr>
        <input type="button" value="사용하기" name="btnok">
        <input type="button" value="창닫기" name="btncancel">
    </form>

    <script>
        var btnok = window.document.form1.btnok;
        var txtid = window.document.form1.txtid;

        btnok.onclick = m1;

        function m1() {
            //1. 자신의 텍스트 박사 > 부모 텍스트박스 복사
            //2. 창닫기                        
            opener.document.form1.txtid.value = txtid.value; 
            window.close();
        }

    </script>


</body>
</html>

// screen 객체

    - window 객체의 자식
    - 화면 관련 정보 제공
    
    ~ availWidth
    ~ availHeight
    ~ colorDepth: 24bit
    ~ orientation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        
        //screen 객체

        //현재 보고 있는 화면의 크기 > 모니터 해상도
        console.log(window.screen.availWidth);
        console.log(window.screen.availHeight);

        console.log(window.screen.colorDepth);
        console.log(window.screen.orientation);

    </script>

</body>
</html>

// location 객체

    - window의 자식
    - 현재 창의 페이지(URL)와 관련된 조작
    
    ~ href: 페이지 이동 변수 ★★★★★
    ~ replace: 페이지 이동 메서드
    ~ reload: 새로 고침

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form name="form1">
        <input type="button" name="btn1" value="확인">
    </form>

    <script>

        window.document.form1.btn1.onclick = m1;

        function m1() {
            // console.log(window.location.href);            
            // window.location.href = 'https://naver.com' //페이지 이동(변수)
            // window.location.replace('http://naver.com') //페이지 이동(메서드)
            
            // window.location.reload(); //새로고침
            window.location.href = 'ex19_location.html';//새로고침

            // console.log(window.location.host); //127.0.0.1:5500
            // console.log(window.location.hostname); //127.0.0.1
            // console.log(window.location.protocol); //http:
            // console.log(window.location.port); //5500
        }        

    </script>

</body>
</html>

// history 객체

    - window의 자식
    - 브라우저의 탐색 기록(history) 영역에 접근하는 객체

    ~ back: 뒤로 가기
    ~ forward: 앞으로 가기
    ~ go(-2) : 2단계 뒤로 가기
    ~ go(2) : 2단계 앞으로 가기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form name="form1">
        <input type="button" name="btn1" value="뒤로 가기">
        <input type="button" name="btn2" value="앞으로 가기">
        <input type="button" name="btn3" value="2단계 뒤로 가기">
        <input type="button" name="btn4" value="2단계 앞으로 가기">
    </form>

    <script>
        //window 생략 가능
        document.form1.btn1.onclick = m1;
        document.form1.btn2.onclick = m2;
        document.form1.btn3.onclick = m3;
        document.form1.btn4.onclick = m4;

        function m1() {
            window.history.back(); //뒤로가기
        }

        function m2() {
            history.forward(); //앞으로 가기
        }

        function m3() {
            history.go(-2);
        }

        function m4() {
            history.go(-2);
        }

    </script>

</body>
</html>

'클라이언트 > JavaScript' 카테고리의 다른 글

[자바스크립트(JavaScript)] 메시지 박스  (0) 2023.04.24
[자바스크립트(JavaScript)] Collection  (0) 2023.04.24
HTML 속성 제어(태그 조작)  (0) 2023.04.21
자바스크립트(JavaScript) 이벤트  (0) 2023.04.21
[자바스크립트(JavaScript)] 상속  (0) 2023.04.09

'클라이언트/JavaScript' Related Articles

티스토리툴바