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 는 창 크기를 조절할 수 있다는 것을 의미한다.
'Javascript' 카테고리의 다른 글
| 7. getElementsByTagName / getElementsByClassName / getElementById (0) | 2021.09.08 |
|---|---|
| 6. window.open 활용 (0) | 2021.09.07 |
| 4. location 객체 (0) | 2021.09.05 |
| 3. 사용자와 커뮤니케이션[alert, confirm, prompt] (0) | 2021.09.04 |
| 2. 전역객체 window (0) | 2021.09.03 |