728x90
BOM(Browser Object Model) : window / 팝업창 / onload / screen / history/ location 사용하기
🩸이슈 발생
BOM(Browser Object Model): 브라우저 객체 모델을 사용해보자.
1. open : 새 창 만들기 (팝업)
2. close : 객체 소멸, 브라우저 닫기
3. onload : 시점차이 문제 해결
4. screen
5. history
6. location
728x90
🔎 사용 전에 알아둘 window 객체 특징
① 브라우저 내장 객체 중에서 최상위 객체
② 모든 전역 객체, 함수, 변수 등은 자동적으로 window 객체에 속함
③ window. 함수(), window. 변수 등과 같은 형태로 사용이 가능
④ window 객체를 생략한 형태로 사용이 가능
ex) window.alert() → alert()
⑤ window 프로퍼티 확인 방법
// window 프로퍼티 확인
for ( var p in window) {
document.write("<h1>" + p + ":" + window[p] + "</h1>");
}
🩹이슈 해결
1. open : 새 창 만들기 (팝업)
window.open ("URL", "name", "feature") ;
- URL : 주소, 파일의 경로
- name: <a>태그의 target으로 사용 가능
- feature : 크기, 위치 등의 설정
- 기본 예시
// 새 창 만들기
// -팝업
var newWindow = window.open("", "", "width=400, height= 300");
//너비와 높이는 px단위. 단위는 붙이지 않는다
if(newWindow){ //새창이 열려있는지. 열렸는지 안열렸는지 확인함
newWindow.document.write("<h1>팝업!!!</h1>");
}else{
alert("팝업 차단을 해제해주세요");
}- 활용 예시
function fn_openQnaManageWrite(){
var width = 800;
var height = 820;
var popupX = window.screenLeft + (document.body.clientWidth / 2) - (width / 2);
var popupY = window.screenTop + (document.body.clientHeight / 2) - (height / 2);
var settings ='toolbar=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,height=' + height + ',width=' + width + ',left=' + popupX + ',top=' + popupY + '';
window.open("openQnaManageWrite.do", "openQnaManageWrite", settings);
}
2. close : 객체 소멸, 브라우저 닫기
window.close();
- 예시
<script type="text/javascript">
//1. 전역 객체 선언
var newWindow;
//2. 창 열기 함수
function winOpen(){
var feature = "Width=400, height=300, top=100, left=100";
newWindow= window.open("index.html","",feature);
}
//3. 창 닫기 함수
function winClose(){
newWindow.close();
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="창 열기" onclick="winOpen()"/>
<input type="button" value="창 닫기" onclick="winClose()"/>
</form>
</body>
3. onload : 시점차이 문제 해결
window.onload = function(){ // <body>태그 확인 후 처리되는 부분 //}
<script type="text/javascript">
//id가 welcome인 요소를 통해 "환영합니다" 문구출력
window.onload = function(){ //로드가 다 되면 (body 다 읽힌 다음에) 실행된다 (시점차이문제 해결)
var h1_t = document.getElementById("welcome");
h1_t.innerHTML = "환영합니다";
}
//*onload 없이 원래 그냥쓰면 오류남: 아이디 불러와야 하는데 헤드가 먼저 실행되면서 바디의 아이디 불러올 수 없음(시점차이)
</script>
</head>
<body>
<h1 id="welcome"></h1>
</body>
4. screen
document.write("<h1>");
//모니터의 해상도 확인(단위 px)
document.write("화면 너비: "+screen.width+"</br>");
document.write("화면 높이: "+screen.height+"</br>");
// 실제 사용 가능한 영역 - 해상도 이하(작업표시줄 같은 공간 제외)
document.write("사용 가능 너비: "+screen.availWidth+"</br>");
document.write("사용 가능 높이: "+screen.availHeight+"</br>");
document.write("</h1>");
// 최대 크기로 새 창 열기
window.open("","","width = "+screen.availWidth + ", height = "+ screen.availHeight)
5. history
history : 웹 페이지 상단의 < , > 화살표
입력된 양식이 삭제되지 않고 유지되기 때문에(캐시가 가능한 경우) 회원가입 페이지 등에서 사용
//1. 뒤로가기
history.back(); //history.go(-1); 와 동일
//2. 앞으로 가기
history.forward(); //history.go(1); 와 동일
//3. 이전 페이지로 가기(뒤로가기)
history.go(-2); // 주로 사용
//4. 이전 이전 페이지로 가기
historygo(-2);
6. location
document.write("<h1>");
document.write("location href=" + location.href + "<br/>"); //url (파일위치)
// 페이지 이동 수단으로 사용 가능
document.write("location hostname=" + location.hostname + "<br/>");
//hostname: 서버의 아이피
document.write("location pathname=" + location.pathname + "<br/>");
//서버제외한 프로젝트길이
document.wirte("</h1>");
<script type="text/javascript">
// 1. 히스토리 남기기 (뒤로가기 있음)
function winGo1(){
//location.href="http://www.google.com"; 주로 사용함**
location.assign("http://www.google.com");
}
//2. 히스토리 안남기기 (뒤로가기 활성화 안됨)
function winGo2(){
location.replace("http://www.google.com");
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="히스토리 남기고 이동" onclick="winGo1()"> <br />
<input type="button" value="히스토리 남김없이 이동" onclick="winGo2()">
</form>
</body>
결과 : 뒤로 가기 버튼 활성화 차이
300x250
'CODING > ⚡JavaScript' 카테고리의 다른 글
| [JS] 모바일 메뉴 햄버거 버튼 만들기 (0) | 2023.10.10 |
|---|---|
| [JS] 오늘 하루 보지 않기 팝업창 만들기 (0) | 2023.10.04 |
| [JS] N명이 보고 있어요! 랜덤 함수 및 setTimeOut 사용하기 (0) | 2023.08.19 |
| [JS] 툴팁 만들기 (0) | 2023.08.13 |
| [JS] TOP 버튼 만들기 (0) | 2023.08.10 |
