Native JS Learning Note 5--bom operation
What is a BOM
The Bom:browser object model is a browser-based, object model that provides a separate and content object structure that can interact with the browser window, with a BOM consisting of multiple objects, which represent the window object of the browser windows as the top-level object of the BOM. Other objects are child objects of that object.
Current Mainstream browser introduction
? IE--11: The most used IE browser in China, has always been poor in the standard support. Support ES6 standard from IE10;
? Sarafi:apple's Mac system comes with a WebKit kernel-based browser that supports ES6 from OS X 10.7 Lion's 6.1 release, and the latest OS X 10.10 Yosemite comes with a Sarafi version of 8.x, which has long supported ES6;
? Firefox:mozilla developed its own gecko kernel and JavaScript engine odinmonkey. Early Firefox was released by version, then finally smart to learn Chrome's approach to self-upgrade, always keep up to date;
? On mobile devices, iOS and Android are mostly using Apple's safari and Google Chrome, respectively, because both are webkit cores, resulting in HTML5 first on the phone (the desktop is definitely Microsoft's hind leg). Standard support for JavaScript is also good, with the latest version supporting ES6.
Why not mention 360 browser, Sogou browser? In fact, this type of browser is just listed above the browser's core base, changed a package, added some personality features, in essence, there is no difference.
BOM objects that can be manipulated
Window object
Window objects are supported by all browsers. It represents a browser window.
All JavaScript global objects, functions, and variables automatically become members of the Window object.
A global variable is a property of a Window object.
A global function is a method of a Window object.
Even the document of the HTML DOM is one of the properties of the Window object:
Window.document.getElementById ("header");
The same as this:
document.getElementById ("header");
Window size
There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:
? Window.innerheight-Interior height of the browser window
? Window.innerwidth-Interior 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 scenarios (all browsers included):
<! DOCTYPE html><html><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= "Browser's internal window width:" + w + ", Height:" + H + ". "</script>
</body></HTML>
This example shows the height and width of the browser window: (not including toolbars/scrollbars)
In addition to this, there is a outerwidth and outerheight property that can get the entire width of the browser window.
Other Operations window methods (not commonly used)
? window.open ()-Open a new window
? Window.close ()-Close the current window
? Window.moveto ()-Move the current window
? Window.resizeto ()-Adjusts the size of the current window
Navigator
The Navigator object represents the browser's information, and the most commonly used properties are:
? Navigator.appname: Browser name;
? Navigator.appversion: Browser version;
? Navigator.language: The language of the browser settings;
? Navigator.platform: Operating system type;
? Navigator.useragent: The user-agent string that is set by the browser.
The Window.navigator object can be written without using the window prefix.
Example:
<! DOCTYPE html><html><body><div id= "example" ></div>
<script>
TXT = "<p>browser codename:" + Navigator.appcodename + "</p>";
txt+= "<p>browser Name:" + navigator.appname + "</p>";
txt+= "<p>browser Version:" + navigator.appversion + "</p>";
txt+= "<p>cookies Enabled:" + navigator.cookieenabled + "</p>";
txt+= "<p>platform:" + navigator.platform + "</p>";
txt+= "<p>user-agent Header:" + navigator.useragent + "</p>";
txt+= "<p>user-agent language:" + navigator.systemlanguage + "</p>";
document.getElementById ("Example"). Innerhtml=txt;
</Script>
</body></HTML>
Attention
The information from the Navigator object is misleading and should not be used to detect browser versions because:
? Navigator data can be changed by browser user
? The browser cannot report a new operating system that is later than the browser published
Screen
The Screen object represents the information on the screens , and the commonly used properties are:
? Screen.width: Screen width, in pixels;
? Screen.availwidth: The available width of the screen, in pixels
? Screen.height: screen height, in pixels;
? Screen.availheight: The available height of the screen, in pixels
? Screen.colordepth: Returns the number of color bits, such as 8, 16, 24.
The Window.screen object can be written without using the window prefix.
<script type= "Text/javascript" >document.write ("screen width:" +screen.width+ "px<br/>"); document.write ("screen height:" +screen.height+ "px<br/>");d ocument.write ("Screen available width:" +screen.availwidth+ "PX<BR/ > ");d ocument.write (" Screen available height: "+screen.availheight+" px "); </script>
Location
The Location object represents the URL information for the current page. For example, a full URL:
Http://www.example.com:8080/path/index.html?a=1&b=2#TOP
can be obtained with location.href:
<script>
document.write (LOCATION.HREF);
</Script>
To get the values for each part of the URL, you can write this:
Location.protocol; ' HTTP '
Location.host; ' www.example.com '
Location.port; ' 8080 '
Location.pathname; '/path/index.html '
Location.search; '? a=1&b=2 '
Location.hash; ' TOP '
To load a new page, you can call Location.assign (). It is convenient to call the Location.reload () method if you want to reload the current page.
Example: Loading a new page
<! DOCTYPE html><html><head><script>function newdoc ()
{
Window.location.assign ("http://www.w3school.com.cn")
}</script></head><body>
<input type= "button" value= "Load New Document" onclick= "Newdoc ()" >
</body></HTML>
History
The history object holds the browser's historical record, and JavaScript can invoke the back () or forward () of the historian object, which is equivalent to the user clicking on the browser's "rewind" or "forward" button.
History back
The History.back () method loads the previous URL in the History list.
This is the same as clicking the Back button in the browser:
<HTML><head><script>function goBack()
{
Window.history.back ()
}</script></head><body>
<input type= "button" value= "Back" onclick= "GoBack ()" >
</body></HTML>
History Forward
The forward () method loads the next URL in the history list.
This is the same as clicking the Forward button in the browser:
<HTML><head><script>function goForward()
{
Window.history.forward ()
}</script></head><body>
<input type= "button" value= "Forward" onclick= "GoForward ()" >
</body></HTML>
Attention
This object is a legacy of history, and for modern web pages, the simple and brutal invocation of history.back () can make users feel very angry because of the large use of Ajax and page interactions.
When a novice starts designing a Web page, he likes to call History.back () when the login page is successful, attempting to return to the pre-logon page. This is a wrong approach.
In any case, you should not use the history object.
Expand
System dialog box
? Alert () Warning box, no return value
? Confirm (' content of question ') returns a Boolean
? Prompt (), input box, return string, or null
Window Object Common Events
? OnLoad: When the page loads
? Onscroll: When the page scrolls
? OnResize: page redefined for large hours
Native JavaScript article Fifth