Javascript

5. window.open

말랑Cow 2021. 9. 6. 13:08
반응형

window 객체는 전역객체이며 브라우저 창에서 가장 큰 단위의 객체라고 할 수 있다.

그 중 window의 open함수는 새로운 창(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>
    <ul>
        <li>
            <input type="button" value="window.open('open.php');" onclick="open1()" />
        </li>
        <li>
            <input type="button" value="window.open('open.php', '_self');" onclick="open2()" />
        </li>
        <li>
            <input type="button" value="window.open('open.php', '_blank');" onclick="open3()" />
        </li>
        <li>
            <input type="button" value="window.open('open.php', 'test');" onclick="open4()" />
        </li>
        <li>
            <input type="button" value="window.open('open.php', '_blank', 'width=300, height=300, resizable=yes');" onclick="open5()" />
        </li>
    </ul>
    

<script>
    function open1(){
        window.open('open.php');
    }

    function open2(){
        window.open('open.php', '_self');
    }

    function open3(){
        window.open('open.php', '_blank');
    }

    function open4(){
        window.open('open.php', 'test');
    }

    function open5(){
        window.open('open.php', '_blank', 'width=300, height=300, resizable=yes');
    }
</script>
</body>
</html>

여기서 <ul> <li> 태그는 리스트 관련 태그이다.

ul은 unordered list 라고 해서 순서가 없는 목록을 만들 때 사용되며, li는 list item으로 ul 내부에 사용해서 각 항목을 표시한다. 순서가 없기 때문에 동그란 점 처럼 생긴 불릿(bullet, ●)으로 항목들을 나타낸다.

 

input 태그는 버튼을 클릭했을 때(onclick) 각각 open1~5 의 함수를 호출한다.

해당함수는 window.open으로 각각 인자가 다르며 open.php 라는 파일을 각 인자값에 맞게 로드시킨다.

 

# open.php

<!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>open.php</title>
</head>
<body>
    <?php
    echo "window.open!";
    ?>
</body>
</html>

open.php 는 단순 echo로 "window.open!" 이라는 문자를 출력한다.

 

각 인자값 별로 설명을 해보자면,

파일명만 명시하고 아무것도 없는 경우엔 새 탭이 열린다. (_blank 와 동일)

_self 는 자기 자신의 창에서 명시된 파일명의 문서를 로드한다.

_blank 는 새 창에 문서가 로드된다. (아무런 인자가 없는것과 동일)

'test' 라고 해서 이름을 적어주면 해당 이름으로 열린 창에 대해 로드시킨다. 즉, 한번 클릭해서 열면 그 창의 이름이 test가 되고 이후 또 클릭했을 때 test 이름을 가진 창에서 문서가 로드되는 것이다.

마지막줄은 width(가로)와 height(세로)의 길이를 정해서 새 창을 연다. resizable=yes 는 창 크기를 조절할 수 있다는 것을 의미한다.

 

아무런 인자가 없는 경우와 _blank 인 경우
_self 인 경우
width, height 값을 지정한 경우

 

반응형