JavaScript Window - Browser Object Model

Browser Object Model (BOM)

There is no formal standard for the Browser Object Model (BOM).

Methods and properties are often considered BOMs since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity.

window object

When the browser opens a document, it creates a window object, that is, the window object represents the window opened in the browser.

The window object is a global object, and the properties of the window can be used as global variables. For example, you can just write document instead of window.document. Similarly, you can use the methods of the current window object as functions, such as just writing alert() instead of Window.alert().

If the document contains frames, the browser creates a window object for the document and an additional window object for each frame.

Tips: Although there is no clear relevant standard for the window object, all browsers support this object.

The document of HTML DOM is also one of the attributes of the window object:

window.document.getElementById("header");

Same as this ：

document.getElementById("header");

Window size

There are three methods to determine The size of the browser window (the browser's viewport, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera, and Safari:

window.innerHeight - The inner height of the browser window

window.innerWidth - The inner width of the browser window

For Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight

document.documentElement.clientWidth

document.body.clientHeight

document.body.clientWidth

Practical JavaScript solution (covers all browsers):

<!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>

Other Window methods

Some other methods:

window.open() - Open a new window

window.close() - Close the current window

window.moveTo() - Move the current window

window.resizeTo() - Adjust the size of the current window

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

JavaScript Window - Browser Object Model

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]