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
or
document.body.clientHeight
document.body.clientWidth
Practical JavaScript solution (covers all browsers):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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
