Detailed explanation of JavaScript browser object sample code-JS Tutorial-php.cn

JavaScript can obtain many objects provided by the browser and perform operations. This article will introduce you to the relevant knowledge of JavaScript's browser objects. Let's take a look.

JavaScript can obtain many objects provided by the browser and operate them.

window

The window object not only serves as the global scope, but also represents the browser window.

The window object has innerWidth and innerHeight properties, which can get the internal width and height of the browser window. The internal width and height refers to the net width and height used to display the web page after removing placeholder elements such as menu bars, toolbars, and borders.

Compatibility: IE<=8 is not supported.

// 可以调整浏览器窗口大小试试:
alert(&#39;window inner size: &#39; + window.innerWidth + &#39; x &#39; + window.innerHeight);

Copy after login

Correspondingly, there is also an outerWidth and outerHeight attribute, which can obtain the entire width and height of the browser window.

navigator

navigator object represents browser information. The most commonly used attributes include :

navigator.appName: Browser name;
navigator.appVersion: Browser version;
navigator.language: The language set by the browser;
navigator.platform: Operating system type;
navigator.userAgent: User-Agent string set by the browser.

alert(&#39;appName = &#39; + navigator.appName + &#39;\n&#39; +
   &#39;appVersion = &#39; + navigator.appVersion + &#39;\n&#39; +
   &#39;language = &#39; + navigator.language + &#39;\n&#39; +
   &#39;platform = &#39; + navigator.platform + &#39;\n&#39; +
   &#39;userAgent = &#39; + navigator.userAgent);

Copy after login

Please note that the navigator information can be easily modified by the user, so the value read by JavaScript is not necessarily correct. In order to write different codes for different browsers, many beginners like to use if to determine the browser version, for example:

var width;
if (getIEVersion(navigator.userAgent) < 9) {
  width = document.body.clientWidth;
} else {
  width = window.innerWidth;
}

Copy after login

However, this may not only make the judgment inaccurate, but also make it difficult to maintain the code. The correct method is to make full use of JavaScript's feature of returning undefined for non-existent properties, and directly use the short-circuit operator || to calculate:

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

Copy after login

screen

screen object represents screen information. Commonly used attributes are:

screen.width: screen width, in pixels;
screen.height: Screen height, in pixels;
screen.colorDepth: Returns the number of color digits, such as 8, 16, 24.

alert(&#39;Screen size = &#39; + screen.width + &#39; x &#39; + screen.height);

Copy after login

location

##location object represents the URL information of the current page. For example, a complete URL:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

can be obtained using location.href . To get the value of each part of the URL, you can write:

location.protocol; // &#39;http&#39;
location.host; // &#39;www.example.com&#39;
location.port; // &#39;8080&#39;
location.pathname; // &#39;/path/index.html&#39;
location.search; // &#39;?a=1&b=2&#39;
location.hash; // &#39;TOP&#39;

Copy after login

To load a new page, you can call location.assign(). If you want to reload the current page, it is very convenient to call the location.reload() method.

if (confirm(&#39;重新加载当前页&#39; + location.href + &#39;?&#39;)) {
  location.reload();
} else {
  location.assign(&#39;/discuss&#39;); // 设置一个新的URL地址
}

Copy after login

document

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

The title attribute of document is read from xxx in the HTML document, but it can be changed dynamically:

document.title = &#39;努力学习JavaScript!&#39;;

Copy after login

Please observe the change of the browser window title.

To find a node in the DOM tree, you need to start searching from the document object. The most commonly used searches are based on ID and Tag Name.

We first prepare the HTML data:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>

Copy after login

Use getElementById() and

getElementsByTagName() provided by the document object to obtain a DOM node by ID and by Tag The name gets a set of DOM nodes:

var menu = document.getElementById(&#39;drink-menu&#39;);
var drinks = document.getElementsByTagName(&#39;dt&#39;);
var i, s, menu, drinks;

menu = document.getElementById(&#39;drink-menu&#39;);
menu.tagName; // &#39;DL&#39;

drinks = document.getElementsByTagName(&#39;dt&#39;);
s = &#39;提供的饮料有:&#39;;
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + &#39;,&#39;;
}
alert(s);

Copy after login

Mocha

Hot Mocha Coffee
Yoghurt
Beijing Old Yoghurt
Juice
freshly squeezed apple juice

## The #document object also has a cookie attribute, which can get the cookie of the current page.

Cookie is the key-value identifier sent by the server. Because the HTTP protocol is stateless, but if the server wants to distinguish which user sent the request, it can use Cookie to distinguish. When a user successfully logs in, the server sends a cookie to the browser, such as user=ABC123XYZ (encrypted string)... After that, when the browser visits the website, it will attach this cookie to the request header, and the server will use the cookie based on the cookie. users can be distinguished.

Cookies can also store some settings of the website, such as the language displayed on the page, etc.

JavaScript can read the Cookie of the current page through document.cookie:

document.cookie; // &#39;v=123; remember=true; prefer=zh&#39;

Copy after login

Since JavaScript can read the Cookie of the page, and the user's login information usually also exists in the Cookie, this This creates a huge security risk because it is allowed to introduce third-party JavaScript code into HTML pages:

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

Copy after login

If there is malicious code in the introduced third-party JavaScript, the www.foo.com website The

user login

information of the www.example.com website will be obtained directly.

In order to solve this problem, the server can use httpOnly when setting Cookies. Cookies set to httpOnly will not be read by JavaScript. This behavior is implemented by the browser. All mainstream browsers support the httpOnly option, and IE supports it starting from IE6 SP1.

To ensure security, the server should always insist on using httpOnly when setting cookies.

history

history object saves the history of the browser, JavaScript can call back() of the history object or forward (), which is equivalent to the user clicking the browser's "back" or "forward" button.

This object is a historical legacy object. For modern Web pages, due to the extensive use of AJAX and page interaction, simply and rudely calling history.back() may make users very angry.

When novices start designing web pages, they like to call history.back() when the login page is successfully logged in, trying to return to the page before login. This is a wrong approach.

You should not use the history object under any circumstances.

The above is the detailed content of Detailed explanation of JavaScript browser object sample code. For more information, please follow other related articles on the PHP Chinese website!