BOM_브라우저 정보 제어

BOM_브라우저 정보 제어

window 객체

console.log(window); 이렇게 하면

console.log(window);

콘솔에서 무슨 객가 들어가있는지 확인가능

 

자주쓰는 윈도우 객체

.innerWidth  : 브라우저 안쪽의 넓이값 반환
.innerHeight  : 브라우저 안쪽의 높이값 반환

.outerWidth :  브라우저의 프레임을 포함한 넓이값 반환

.outerHeight : 브라우저의 프레임을 포함한 높이값 반환

.scrollY : 현재 스크롤된 브라우저의 y축 거리값

.scrollX : 현재 스크롤된 브라우저의 x축 거리값

 

현 브라우저의 넓이,높 값 구하는 방법

만약 줄일 때 마다 넓이값을 구하려면 resize(리사이즈) 이벤트를 사용하면 된다.

/*넓이값*/
window.addEventListener("resize", e=>{
 console.log(window.innerWidth);
})

/*높이값*/
window.addEventListener("resize", e=>{
 console.log(window.innerHeight);
})

outerWidth .outerHeight  값은 브라우저 상단에 프레임 값 까지 포함해서 계산

 

.scrollY , .scrollX

스크롤

/*스크롤*/
window.addEventListener("scroll", e=>{
 console.log(window.scrollY);
})

 

 

navigator 객체 

const version = navigator.userAgent;

.userAgent;

= navigator 객체 안에 유저 에이전트 값을 담는다.

= 사용자가 어떤 브라우저인지 판단 후 브라우저 별 다른 효과 적용 가능

const version = navigator.userAgent;
console.log(version);

if(/whale/i.test(version))

= whale 이라는 단어가 있는지

= i를 넣으면 대소문자 구분하지않고 찾을수있음

 

const version = navigator.userAgent;
console.log(version);

if(/whale/i.test(version)){
 console.log("whale 브라우저로 접속했습니다.");
}

if(/edg/i.test(version)){
 console.log("edge 브라우저로 접속했습니다.");
}

if(/trident/i.test(version)){
 console.log("IE 브라우저로 접속했습니다.");
}

+ 모든 브라우저 값에 크롬이라는 단어가 포함되어있음.

+ 크롬 브라우저 판단하는법 = 

1. 복잡하니까 whale Edge IE를 함수로 만든다.

const isWhale = /whale/i.test(version);
const isEdg = /edg/i.test(version);
const isIE = /trident/i.test(version);

if(isWhale){
 console.log("whale 브라우저로 접속했습니다.");
}

if(isEdg){
 console.log("Edge 브라우저로 접속했습니다.");
}

if(isIE){
 console.log("IE 브라우저로 접속했습니다.");
}

2. isWhale isEdg isIE 함수가 들어가 있지 않으면 크롬이니까 반전시켜서 작성

= 반전 은 ! 사용

if(!isWhale && !isEdg && !isIE){
 console.log("chrome 브라우저로 접속했습니다.");
}

+ 이런 식으로 브라우저 별로 변경 가능

const isWhale = /whale/i.test(version);
const isEdg = /edg/i.test(version);
const isIE = /trident/i.test(version);

if(isWhale){
 console.log("whale 브라우저로 접속했습니다.");
 document.querySelector("body").style.backgroundColor="Lightgreen";
}

if(isEdg){
 console.log("Edge 브라우저로 접속했습니다.");
 document.querySelector("body").style.backgroundColor="Lightgreen";
}

if(isIE){
 console.log("IE 브라우저로 접속했습니다.");
 document.querySelector("body").style.backgroundColor="Lightgreen";
}