자바스크립트 창


BOM(브라우저 개체 모델)은 JavaScript가 브라우저와 "대화"하는 기능을 제공합니다.

브라우저 개체 모델(BOM)

브라우저 개체 모델(Browser ObjectM odel( BOM)) 공식적인 표준은 없습니다.

최신 브라우저는 JavaScript 상호 작용을 위해 (거의) 동일한 메서드와 속성을 구현했기 때문에 메서드와 속성은 종종 BOM으로 간주됩니다.

Window 객체

모든 브라우저는 window 객체를 지원합니다. 브라우저 창을 나타냅니다.

모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.

전역 변수는 창 개체의 속성입니다.

전역 함수는 창 개체의 메서드입니다.

HTML DOM의 문서도 window 객체의 속성 중 하나입니다.

window.document.getElementById("header");

다음과 동일:

document.getElementById("header");

창 크기

브라우저 창의 크기를 결정하는 세 가지 방법이 있습니다(브라우저의 뷰포트가 아니라 브라우저의 뷰포트). 도구 모음 및 스크롤 막대 포함).

Internet Explorer, Chrome, Firefox, Opera 및 Safari의 경우:

  • window.innerHeight - 브라우저 창의 내부 높이

  • window.innerWidth - 브라우저 창의 내부 너비

Internet Explorer 8, 7, 6, 5의 경우:

  • 문서 .documentElement .clientHeight

  • document.documentElement.clientWidth

또는

  • document.body. clientHeight

  • document.body.clientWidth

실용적인 JavaScript 솔루션(모든 브라우저에 적용):

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

이 예에서는 높이를 보여줍니다. 브라우저 창 및 너비: (도구 모음/스크롤 막대 제외)

다른 창 방법

다른 방법:

  • window.open ( ) - 새 창 열기

  • window.close() - 현재 창 닫기

  • window.moveTo() - 현재 창 이동 window

  • window.resizeTo() - 현재 창 크기를 조정합니다