-
The BOM browser object model enables JavaScript to "talk" with the browser.
-
Since modern browsers have (almost) implemented the same methods and properties in JavaScript interactivity, they are often considered as BOM methods and properties.
4.1 window The browser mainly uses the window object to operate js code
All contents in js belong to window. Any content can be called through window, including document, console and other objects
-
All browsers support window objects. It represents the browser window.
-
All JavaScript global objects, functions, and variables automatically become members of window objects.
-
Global variables are properties of window objects.
-
Global functions are methods of window objects.
-
Even the document of the HTML DOM is one of the attributes of the window object:
-
window size
-
Width and height inside the browser window
-
window.innerWidth - the internal width of the browser window, which changes as the window changes
-
window.innerHeight - the internal height of the browser window, which changes as the window changes
-
-
Width and height of body content
-
document.body.clientWidth
-
-
-
document.body.clientHeight
-
Window Screen
-
Screen width: the screen.availWidth property returns the width of the visitor's screen and the fixed screen width
-
Screen height: the screen.availHeight property returns the height of the visitor's screen, a fixed screen height
-
document.write("Screen width: " + screen.availWidth);
document.write("Screen height: " + screen.availHeight);-
Window Location
-
The window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page.
-
The window.location object can be written without the prefix window. Some examples:
-
location.hostname returns the domain name of the web host
-
location.pathname returns the path and file name of the current page
-
location.port returns the port of the web host (80 or 443)
-
location.protocol returns the web protocol used (http: / / or https: / /)
-
The location.href property returns the URL of the current page
-
The location.assign() method loads the new document
-
-
function newDoc()
{
window.location.assign("http://www.baidu.com/")
}
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
-
Window History
-
The window.history object contains the history of the browser.
-
The window.history object can be written without the prefix window.
-
history.back()
-
history.forward()
-
-
Some examples of methods are as follows:
-
history.back() - the same as clicking the back button in the browser
history.forward() - the same as clicking the button forward in the browser
<body> <!-- history: Used for forward, backward, and refresh operations; Corresponds to the browser's control --> <a href="04_history_2.html">Enter the most beautiful page</a><br /> <input type="button" value="back off" onclick="history.back()" /> <input type="button" value="forward" onclick="window.history.forward()" /> <input type="button" value="Refresh" onclick="location.reload()"/> </body>
<body> <a href="04_history_1.html">I am the most beautiful page</a><br /> <input type="button" value="Back 2" onclick="history.go(-1)"/> <input type="button" value="Forward 2" onclick="history.go(1)"/> <input type="button" value="Refresh 2" onclick="history.go(0)"/> </body>
-
Window Navigator
-
The window.navigator object can be written without the prefix window.
-
<div id="example"></div>
<script>
var txt = "<p>Browser code: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser name: " + navigator.appName + "</p>";
txt+= "<p>Browser version: " + navigator.appVersion + "</p>";
txt+= "<p>Enable Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>hardware platform : " + navigator.platform + "</p>";
txt+= "<p>user agent : " + navigator.userAgent + "</p>";
txt+= "<p>User agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>