본문 바로가기

HTML DOM Window Object Methods

1. open() Method
open() 메소드는 새 브라우저 창을 여는데 사용한다.
window.open(URL, name, specs, replace)
[Parameter]
  • URL: 보여질 페이지의 URL 지정. 지정하지 않을 시 about:blank 페이지가 보여짐(선택)
  • name: 폼이나 링크에 타겟 속성값을 지정. 다음 값 제공(선택)
    _blank - URL이 새창으로 열림
    _media - URL이 미디어 표시줄의 영역에 열림 (IE6+)
    _parent - URL이 부모 프레임에 열림
    _search - URL이 브라우저의 검색패널에 열림 (IE5+)
    _self - URL이 현재 페이지를 대신함
    _top - URL이 로드된 프레임셋을 대신함
  • specs: 콤마로 구분된 아이템 리스트. 다음 값 제공(선택)
    fullscreen = yes | no | 1 | 0 = 풀스크린의 브라우저를 나타낼지를 지정 (디폴트 no)
    height = 윈도우의 세로 길이 지정 (최소값 100)
    left = 화면 왼쪽 창위치 좌표 픽셀로 지정
    location = yes | no | 1 | 0 = 주소 필드를 나타낼지를 지정 (디폴트 yes)
    menubar = yes | no | 1 | 0 = 메뉴바를 나타낼지를 지정 (디폴트 yes)
    resizable = yes | no | 1 | 0 = 창 재조정 가능한지를 지정 (디폴트 yes)
    scrollbars = yes | no | 1 | 0 = 스크롤바 나타낼지를 지정 (디폴트 yes)
    status = yes | no | 1 | 0 = 상태바 추가할지를 지정 (디폴트 yes)
    titlebar = yes | no | 1 | 0 = 제목표시줄 나타낼지를 지정 (디폴트 yes)
    toolbar = yes | no | 1 | 0 = 브라우저 툴바를 나타낼지를 지정 (디폴트 yes)
    top = 화면 상단 창위치 좌표 픽셀로 지정
    width = 윈도우의 가로 길이 지정 (최소값 100)
  • replace: URL이 새 입력을 만들지, 히스토리 리스트의 현재 입력을 대신할지를 지정. 다음 값 제공(선택)
    true - URL이 히스토리 리스트에서 현재 문서를 대신함
    false - URL이 히스토리 리스트에서 새 입력을 생성
<!-- 새창 띄우기 -->
<html>
<head>
<script type="text/javascript">
function newWin(){
  window.open("test_js.html","_blank","toolbar=yes, status=no, menubar=yes, scrollbars=yes, resizable=no, width=400, height=400")
}
</script>
</head>

<body>
<input type="button" onclick="newWin()" value="New Window" />
</body>
</html>

2. resizeBy() Method
resizeBy() 메소드는 지정된 픽셀로 창 크기를 재조정하는데 사용한다.
resizeBy(width,height)
[Parameter]
  • width - 지정된 숫자 만큼 창의 가로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.(필수)
  • height - 지정된 숫자 만큼 창의 세로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.(필수)
3. resizeTo() Method
resizeTo() 메소드는 지정된 가로,세로 크기로 창을 재조정하는데 사용한다.
resizeTo(width,height)
[Parameter]
  • width - 필수. 지정된 숫자로 창의 가로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.
  • height - 선택. 지정된 숫자로 창의 세로길이 픽셀을 재조정한다. 양의 숫자나 음의 숫자가 될 수 있다.
<!-- 창 크기 변경 -->
<html>
<head>
<script type="text/javascript">
function sizeTo(){
  window.resizeTo(600,600)
}
function sizeBy(){
  window.resizeBy(-100,-100)
}
</script>
</head>

<body>
<input type="button" onclick="sizeTo()" value="To resize" /><br />
<input type="button" onclick="sizeBy()" value="By resize" />
</body>
</html>

4. setTimeout() Method
setTimeout() 메소드는 밀리초의 지정된 숫자 후에 함수 호출이나, 표현식의 값을 구하는데 사용.
setTimeout(code, millisec, lang)
[Parameter]
  • code: 실행될 코드나 함수의 포인터(필수)
  • millisec: 코드를 실행하기전 기다릴 밀리초의 숫자(필수)
  • lang: 스크립팅 언어: JScript | VBScript | JavaScript(선택)
<!-- 3초후 경고창 출력 -->
<html>
<head>
<script type="text/javascript">
function timedMsg(){
  window.setTimeout("alert('3 second')", 3000)
}
</script>
</head>
<body>
<input type="button" onclick="timedMsg()" value="Alert timed" />
</body>
</html>
.
<!-- 타임 무한루프 start/stop -->
<html>
<head>
<script type="text/javascript">
var c = 0
var t
function countStart(){
  document.getElementById('counter').value = c
  c = c + 1
  t = setTimeout("countStart()", 1000)
}
function countStop(){
  clearTimeout(t)
}
</script>
</head>
<body>
<input type="text" id="counter" size="20" /><br />
<input type="button" onclick="countStart()" value="Start Count" /><br />
<input type="button" onclick="countStop()" value="Stop Count" />
</body>
</html>