Where The Streets Have No Name

브라우저 내장객체-window 객체...새창관련 본문

Developement/Web

브라우저 내장객체-window 객체...새창관련

highheat 2006. 7. 26. 15:22
http://blog.naver.com/doolyking/60004548650

window 객체 .........................................................


아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다.


■ window 객체 프로퍼티
status브라우저의 상태바에 문자열을 출력하는 경우에 사용
defaultStatus브라우저의 상태바에 초기 문자열을 설정
length창안의 프레임 수
name창 이름
self현재 창 자신, window와 같음
window현재 창 자신, self와 같음
parent프레임에서 현재프레임의 상위프레임
top현재프레임의 최상위프레임
openeropen()으로 열린 창에서 볼 때 자기를 연 창
documentdocument 오브젝트
frames창안의 모든 프레임에 대한 배열정보
historyhistory 오브젝트 및 배열
locationlocation 오브젝트
closed창이 닫혀 있는 상태
locationbarlocation 바
menubar창 메뉴 바
innerHeight창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음
innerWidth창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음
outerHeight창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음
outerWidth창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음
pageXOffset현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음
pageYOffset현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음
personalbar창의 퍼스널 바
scrollbar창의 스크롤 바
statusbar창의 상태 바
toolbar창의 툴 바


■ window 객체 메서드
alert()경고용 대화상자를 보여줌
clearTimeout()setTimeout 메소드를 정지
confirm()확인, 취소를 선택할 수 있는 대화상자를 보여줌
open()새로운 창을 오픈
prompt()입력창이 있는 대화상자를 보여줌
setTimeout()일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정
eval()문자열을 숫자로 바꿈
toString()오브젝트를 문자열로 바꿈
blur()focus를 이동
focus()focus를 줌
scroll()창을 스크롤 함
valueOf()오브젝트 값을 반환
back()한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함
find()창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함
forward()한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함
home()초기화 홈페이지로 이동. 익스플로러 지원 안함
moveby()창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정
moveto()창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정
resizeby()창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정
resizeto()창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정
scrollby()창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정
scrollto()창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정
stop()불러오기를 중지. 익스플로러는 지원 안함
captureEvents()모든 타입의 이벤트를 판단
setInterval()일정시간마다 지정된 처리를 반복
clearInterval()setInterval 메소드의 정지
handleEvent()이벤트 취급자를 정함
print()화면에 있는 내용을 프린터로 출력
releaseEvent()다른 계층의 이벤트로 이벤트를 넘김
routeEvent()판단한 이벤트와 같은 계층의 이벤트
toSource()오브젝트값을 문자열로 반환


■ window 객체 이벤트핸들러
onBlur브라우저가 포커스를 잃을 때 발생
onDragDrop사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함
onError문서를 읽는 중에 에러가 생길 때 발생
onFocus브라우저에 포커스를 얻을 때 발생
onLoad문서를 읽을 때 발생
onMove브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함
onResize창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함
onUnload현재 문서를 지울려고 할 때 발생


■ 새창열기 open() 메서드
window.open("문서url","창이름","창의 특성")

웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠!

첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠.


■ 창의특성
directoriesyes || no익스플로러 연결도구모음, 익스플로러 전용
locationyes || no주소입력란
menubaryes || no메뉴표시줄
scrollbarsyes || no스크롤바
statusyes || no상태표시줄
toolbaryes || no도구모음
copyhistoryyes || no히스토리정보를 복사
resizableyes || no창 크기 조절 가능여부
width픽셀창의 너비
height픽셀창의 높이
 <script language="javascript">
// 페이지로딩시 새창 열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<body onLoad="winOpen()">
<script language="javascript">
// 클릭시 새창열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()">
<script language="javascript">
// 클릭시 새창열기 , 링크에서

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()"> 클릭열기 </font>
<a href="javascript:winOpen()"> 링크열기 </a>
<script language="javascript">
// 매개변수를 이용하기

function winOpen(url,winname,winhow) {
window.open(url,winname,winhow)
}
</script>

<a href= "javascript:winOpen('123.html','newWin','width=300,height=200,toolbar=no')"> 매개열기 </a>


■ 새창열기 close() 메서드
 <script language="javascript">
function winClose() {
window.close()
}
</script>

<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>

<a href= "javascript:window.close()"> 메서드 이용 닫기 </a>


■ 새로 열린 창에서 연 창을 컨트롤하기
 <script language="javascript">

// 창 닫기 전에 연 창의 폼요소에 값 넘기기

function winClose(addr) {
opener.form1.address=addr
self.close()
}
</script>

<a href= "javascript:winClose('서울 종로구')"> 종로구</a>
<a href= "javascript:winClose('서울 마포구')"> 마포구</a>
<script language="javascript">

// 창 닫기 전에 연 창을 리로드하기

function winClose() {
opener.location.reload()
self.close()
}
</script>

<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>


■ 새로 열린 창에서 크기 조절하기 window.resizeTo
 <script language="javascript">
// 페이지로딩시 크기 조절

function winSize() {
window.resizeTo(300,200) // 너비,높이
}
</script>

<body onLoad="winSize()">


■ 새로 열린 창에서 위치 조절하기 window.moveTo
 <script language="javascript">
// 페이지로딩시 위치 조절

function winMove() {
window.moveTo(200,200) // X,Y 좌표
}
</script>

<body onLoad="winMove()">
'Developement/Web' Related Articles more