Liaoche JS Tutorial Note 10 Browser object

JavaScript can get many objects provided by the browser and manipulate them.

Window

windowObjects not only act as global scopes, but also represent browser windows.

windowObject has innerWidth and innerHeight properties that can get the internal width and height of the browser window. Interior width height is used to display the net width height of a Web page after a placeholder element, such as a menu bar, toolbar, border, is removed.

Compatibility: Ie<=8 not supported.

Browser object read: 52726

JavaScript can get many objects provided by the browser and manipulate them.

Window

windowObjects not only act as global scopes, but also represent browser windows.

windowObject has innerWidth and innerHeight properties that can get the internal width and height of the browser window. Interior width height is used to display the net width height of a Web page after a placeholder element, such as a menu bar, toolbar, border, is removed.

Compatibility: Ie<=8 not supported.

Corresponding, there is also a outerWidth outerHeight property that can get the entire width of the browser window.

Navigator

navigatorobject represents the information of the browser, 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: A string that is set by the browser User-Agent .

Note that navigator the information can be easily modified by the user, so the value that JavaScript reads is not necessarily correct. Many beginners in order to write different code for different browsers, like to if judge the browser version, for example:

< 9) {    width = document.body.clientWidth;} else { width = window.innerWidth;}

But it is possible to judge inaccurate and difficult to maintain code. The correct approach is to make full use of JavaScript for attributes that do not exist undefined , and are calculated directly with the short-circuit operator || :

var width = window.innerWidth || document.body.clientWidth;

Screen

screenObjects represent the information on the screen, and commonly used properties are:

• Screen.width: Screen width, in pixels;
• Screen.height: screen height, in pixels;
• Screen.colordepth: Returns the number of color bits, such as 8, 16, 24.

Browser object read: 52727

JavaScript can get many objects provided by the browser and manipulate them.

Window

windowObjects not only act as global scopes, but also represent browser windows.

windowObject has innerWidth and innerHeight properties that can get the internal width and height of the browser window. Interior width height is used to display the net width height of a Web page after a placeholder element, such as a menu bar, toolbar, border, is removed.

Compatibility: Ie<=8 not supported.

Corresponding, there is also a outerWidth outerHeight property that can get the entire width of the browser window.

Navigator

navigatorobject represents the information of the browser, 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: A string that is set by the browser User-Agent .

Note that navigator the information can be easily modified by the user, so the value that JavaScript reads is not necessarily correct. Many beginners in order to write different code for different browsers, like to if judge the browser version, for example:

< 9) {    width = document.body.clientWidth;} else { width = window.innerWidth;}

But it is possible to judge inaccurate and difficult to maintain code. The correct approach is to make full use of JavaScript for attributes that do not exist undefined , and are calculated directly with the short-circuit operator || :

var width = window.innerWidth || document.body.clientWidth;

Screen

screenObjects represent the information on the screen, and commonly used properties are:

• Screen.width: Screen width, in pixels;
• Screen.height: screen height, in pixels;
• Screen.colordepth: Returns the number of color bits, such as 8, 16, 24.

Location

locationobject 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 used to location.href get. To get the values for each part of the URL, you can write this:

// ‘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 it location.assign() . It is convenient to call the method if you want to reload the current page location.reload() .

Document

documentobject represents the current page. Because HTML is represented as a tree structure in the browser as a DOM, the document object is the root node of the entire DOM tree.

documenttitleproperties are read from an HTML document <title>xxx</title> , but can be changed dynamically:

To find a node in the DOM tree, you need to start looking for it from the document object. The most commonly used lookups are based on the ID and tag Name.

Let's prepare the HTML data first:

<DlId= "Drink-menu" style= "border:solid 1px #ccc;p Adding : 6px; " > <dt> Mocha </dt> <dd> Gemoca coffee </dd> <dt> yogurt </dt> <dd> Beijing old yogurt </dd> <dt> Juice </dt> <dd> freshly squeezed apple juice </dd> </DL>            

A document DOM node is provided with an object getElementById() and getElementsByTagName() can be obtained by ID, and a set of DOM nodes are obtained by tag name:

var menu = document.getElementById (' Drink-menu ');
var drinks = document.getElementsByTagName (' dt ');
var i, S, menu, drinks;

menu = document.getElementById (' Drink-menu ');
Menu.tagname; ' DL '

Drinks = document.getElementsByTagName (' dt ');
s = ' drinks provided are: ';
for (i=0; i<drinks.length; i++) {
s = s + drinks[i].innerhtml + ', ';
}
alert (s);

Mocha

Gemoca Coffee

Yogurt

Beijing Old Yogurt

Juice

freshly squeezed apple juice

documentObject also has a cookie property that can get the current page's cookie.

Cookies are key-value identifiers that are sent by the server. Because the HTTP protocol is stateless, it is possible to distinguish between a cookie and a server to distinguish which user is sending the request. When a user logs on successfully, the server sends a cookie to the browser, for example, after which the user=ABC123XYZ(加密的字符串)... browser will attach the cookie to the request header, and the server can differentiate the user from the cookie.

Cookies can also store settings for a site, such as the language displayed on the page, and so on.

JavaScript can be document.cookie read to the current page by a cookie:

// ‘v=123; remember=true; prefer=zh‘

Because JavaScript can read the cookie on the page, and the user's login information is usually also in the cookie, this creates a huge security risk, because the introduction of third-party JavaScript code in the HTML page is allowed:

<!-- 当前页面在wwwexample.com --><html>    <head> <script src="http://www.foo.com/jquery.js"></script> </head> ...</html>

If malicious code is present in the introduced third-party JavaScript, the www.foo.com site will get the www.example.com user login information directly to the site.

To solve this problem, the server can be used when setting a cookie httpOnly , and httpOnly the set cookie will not be read by JavaScript. This behavior is implemented by the browser, the main browser support httpOnly options, ie from IE6 SP1 start support.

To ensure security, the server should always use it when setting cookies httpOnly .

History

historyThe object holds the browser's history, and JavaScript can invoke the history object back() or the forward () user clicks the browser's back or forward button.

This object belongs to the historical legacy, and for modern web pages, a simple and brutal invocation can be very annoying to users because of the large use of Ajax and page interactions history.back() .

When a novice starts designing a Web page, he likes to call when the login page is successful history.back() and tries to return to the page before the login. This is a wrong approach.

In any case, you should not use history this object anymore.

Liaoche JS Tutorial Note 10 Browser object