티스토리 뷰

기타 개발/Web

[BOM] 브라우저를 제어하기 위한 기능

beankhan 2017. 6. 23. 23:03


출처

https://opentutorials.org/course/1375/6628
https://opentutorials.org/course/1375/6633
https://opentutorials.org/course/1375/6634
https://opentutorials.org/course/1375/6651



Window 객체

window 객체는 모든 객체가 소속된 객체이고
전역객체이면서, 창이나 프레임을 말한다.

Window 객체는 식별자 window 를 통해서 얻을 수 있고
생략가능하다.

따로 선언한 전역 변수와 함수도 window 객체의 프로퍼티이다.
또한 모든 객체는 window 객체의 자식이다.


<!DOCTYPE html>
<html>
<script>
var a = 1;
alert(a);
alert(window.a);
</script>
<body>
</body>
</html>





BOM 으로 사용자와 커뮤니케이션하는 방법

alert

경고창으로 알람을 주거나 디버깅용으로 사용한다.

<!DOCTYPE html>
<html>
<body>
<input type="button" value="alert" onclick="alert('hello world');" />
</body>
</html>



confirm

<!DOCTYPE html>
<html>
<body>
<input type="button" value="confirm" onclick="func_confirm()" />
<script>
function func_confirm(){
if(confirm('ok?')){
alert('ok');
} else {
alert('cancel');
}
}
</script>
</body>
</html>




prompt


<!DOCTYPE html>
<html>
<body>
<input type="button" value="prompt" onclick="func_prompt()" />
<script>
function func_prompt(){
if(prompt('id?') === 'egoing'){
alert('welcome');
} else {
alert('fail');
}
}
</script>
</body>
</html>






Location 객체

문서의 주소와 관련된 객체로 window 객체의 프로퍼티이다.
이 객체를 이용해서 문서의 URL 을 변경하거나
위치와 관련해서 다양한 정보를 얻을 수 있다.

현재 URL 알아내기

console.log(location.toString(), location.href);


URL 정보 Parsing

console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)


다른 url 함수들

<이동>

location.href = 'http://egoing.net';
location = 'http://egoing.net';

<Reload>

location.reload();



Navigator 객체

브라우저의 정보를 제공하는 객체로
주로 호환성 문제를 위해서 사용한다.

아래 명령을 통해서 navigator 의 전체 프로퍼티를 볼 수 있다.

console.dir(navigator);

주요 프로퍼티

appName

웹브라우저의 이름이다. Internet Explorer 는 (IE) 로,
Firefox, Chrome 은 (Nescape) 로 표시된다.

userAgent
브라우저가 서버측으로 전송하는 USER-AGENT HTTP Header 의 내용이다.

platform

브라우저가 동작하고 있는 OS 에 대한 정보이다.


기능 테스트

브라우저는 계속 변화하기 때문에 
특정 브라우저에서 기능이 동작하지 않았다고 해서
Navigator.appName 으로 분기처리하기는 쉽지않다.

이에, 기능 테스트를 사용하게 된다.

아래 예제에서, Object.keys 라는 기능은 ECMAScript 5 에서
추가되었기 때문에 오래된 브라우저에서는 동작하지 않을 수 있다.

이때 if ( !Object.keys ) 의 여부를 확인함으로써
지원이 가능한지 불가능한지를 판단할 수 있다.

if (!Object.keys) {
Object.keys = (function () {

위 기능테스트로도 각 브라우저에서의 동작이 다를경우
Navigator.appName, appVersion 에 따라
분기처리가 진행되어야한다.





창 제어

open

window.open 은 새로운 창을 만든다.
보안상의 이슈로 open method 가 호출될 때
팝업 차단 메시지가 뜨며 사용자의 action 이 있은 후에
열릴 수 있다.


<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
<li>
첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
<input type="button" onclick="open1()" value="window.open('demo2.html');" />
</li>
<li>
두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
<input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
</li>
<li>
_blank는 새 창을 의미한다. <br />
<input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
</li>
<li>
창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
<input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
</li>
<li>
세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
<input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
</li>
</ul>
<script>
function open1(){
window.open('demo2.html');
}
function open2(){
window.open('demo2.html', '_self');
}
function open3(){
window.open('demo2.html', '_blank');
}
function open4(){
window.open('demo2.html', 'ot');
}
function open5(){
window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>
















'기타 개발 > Web' 카테고리의 다른 글

[JavaScript] 웹브라우저 Java Script (JavaScript Load, Object Model, BOM, DOM)  (0) 2017.06.19
HTTP 프로토콜과 REST 소개  (0) 2017.05.22
[JSON] JSON 의 개요  (0) 2017.04.24
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함