search

Home >Web Front-end >JS Tutorial >Detailed explanation of JavaScript browser object sample code

Detailed explanation of JavaScript browser object sample code

怪我咯
怪我咯Original
2017-07-07 15:11:171158browse

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: IEa09474dfeb28e62c76ef38d63bd93009xxx6e916e0f7d1e588d4f442bf645aedb2f in the HTML document, but it can be changed dynamically: 

document.title = '努力学习JavaScript!';

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>

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);

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;

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript typing game code exampleNext article：JavaScript typing game code example

Related articles

See more