[ex17] window

ex17

창 제어

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

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

window.open(URL, Name, Options)
1. URL: 새창의 URL
2. Name: 새창 이름
3. Options: 옵션들..

부모페이지(ex17_window)

<body>
    <!-- ex17_window.html -->
    <h1>window 객체</h1>
    <form name="form1">
        <fieldset>
            <legend>창 제어</legend>
            <input type="button" name="btn1" value="자식창 띄우기">
            <input type="button" name="btn2" value="자식창 닫기">
            <hr>
            <input type="button" name="btn3" value="자식창 조작하기">
        </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;

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

        var child ='';

        function m1() {
            //자식 페이지의 window 참조 객체
            child = window.open('./ex17_child.html', 'child', 'width=300 height=200 left=1000 top=30');

            // alert(child); //[object Window]
        }

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

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

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

    </script>
</body>
</html>

자식페이지(ex17_child)

- 부모창의 자원에 접근하기 > 부모 페이지의 window 객체가 필요
- opener: 자기 자신을 연 기존 창의 window 객체를 참조

<body>
    <!-- ex17_child.html -->
    <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: 자기 자신을 연 기존 창의 window 객체를 참조
            opener.document.form1.btn3.value = '자식창에서 버튼의 라벨을 조작합니다.'
        }

    </script>
</body>
</html>

자식페이지(ex17_idcheck)

<body>
    <!-- ex17_idcheck.html -->
    <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. 자신의 텍스트박스 > 부모 텍스트박스에 복사
        opener.document.form1.txtid.value = txtid.value;            
        //2. 창닫기
        window.close();
    }
    </script>
</body>

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

[ex24~25] 롤오버 이미지, 메세지 박스 (0)	2023.04.26
[ex18~22] screen, location, history, collection, link (0)	2023.04.25
[ex15~16] Attribute, images (0)	2023.04.21
[ex13~14] Mouse Event, Key Event (0)	2023.04.21
[ex11~] BOM, event (0)	2023.04.21

🚀

[ex17] window

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

티스토리툴바

[ex17] window

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바