[FC] Window 객체 / Navigator Day-13
ex) main.js
// (브라우저) 안쪽의 넓이 값을 구할 때
console.log(window.innerWidth);
// (브라우저) 안쪽의 높이 값을 구할 때
innerHeight
// (브라우저) 프레임을 포함한 넓이의 반환
outerWidth
// (브라우저) 프레임을 포함한 높이값 반환
outerHeight
// 현재 스크롤 된 브라우저의 Y축 거리값
scrollY
// 현재 스크롤 된 브라우저의 X축 거리값
scrollX
ex) 브라우저 리사이즈 할 때 마다 값을 구할 때
window.addEventListener("resize", (e) => {
console.log(window.InnerHeight);
})
ex) 스코롤 할 때 마다 거리값 구하기
window.addEventListener("scroll", (e) => {
console.log(window.scrollY);
})
Navigator
현재 우리가 보고 있는 화면을 브라우저가 어떤 정보값을 보유하고 있는지 확인하고, 각 브라우저마다의 고유값을 이용해서 원하는 브라우저마다 특정 코드를 실행할 수 있는 조건까지 걸 수 있다.
ex) main.js
const version = navigator.userAgent;
console.log(version);
if(/whale/i.test(version)){
console.log("whale 브라우저를 사용중..");
}
if(/edg/i.test(version)){
console.log("Edge 브라우저를 사용중..");
}
// 크롬 브라우저를 사용하고 있는 걸 확인하는 또 다른 방법
const isWhale = /whale/i.test(version);
const isEdge = /edg/i.test(version);
if(!isWhale && !isEdge){
console.log("Whale도 아니고, Edge도 아니고, 아마 Chrome을 사용하고 있습니다.);
};
Author And Source
이 문제에 관하여([FC] Window 객체 / Navigator Day-13), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/FC14저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)