Native JavaScript article Fifth

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.