JavaScript 창 - 브라우저 개체 모델

브라우저 개체 모델(BOM)

브라우저 개체 모델(BOM)에 대한 공식적인 표준은 없습니다.

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

window 개체

브라우저가 문서를 열면 창 개체가 생성됩니다. 즉, 창 개체는 브라우저에서 열린 창을 나타냅니다.

창 개체는 전역 개체이며, 창의 속성을 전역 변수로 사용할 수 있습니다. 예를 들어 window.document 대신 document를 작성할 수 있습니다. 마찬가지로, Window.alert() 대신에 단지 Alert()를 작성하는 것과 같이 현재 창 객체의 메서드를 함수로 사용할 수 있습니다.

문서에 프레임이 포함되어 있으면 브라우저는 문서에 대한 창 개체와 각 프레임에 대한 추가 창 개체를 만듭니다.

팁: 창 개체에 대한 명확한 관련 표준은 없지만 모든 브라우저는 이 개체를 지원합니다.

HTML DOM의 문서는 창 객체의 속성 중 하나이기도 합니다:

window.document.getElementById("header");

다음과 같습니다:

document.getElementById("header") ;

Window Size

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

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

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

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

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

document.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 .resizeTo( ) - 현재 창 크기를 조정합니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.moveTo(0,0) </script> </head> <body> <p>把新窗口移动到指定屏幕左上角（屏幕左上角为 0,0 坐标，往右和下计算为正）</p> </body> </html>

제출하다 코드 재설정

자동운전