The role of the Window object in the front-end field

##Special window

Mention window, on the web page It is very common, such as this:

window.onload=function(){
//执行函数体
}

This code means what to do when the web page content is loaded.

In the field of js, the window object has a dual role. It is both an interface used to access the browser window and a Global object. [Related course recommendations:

JavaScript Video Tutorial]

Because of this, all variables and functions declared in the global scope will become properties and methods of the window object.

For example:

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

But the two are not completely equivalent. Global variables cannot be deleted through delete, but properties defined directly on the window can.

Historical legacy

Early web pages would use more windows and frames, displaying inlays in the same window A set of web pages, as well as various pop-up windows such as alert, confirm, prompt, etc., allow users to input or confirm information. However, with the development of web development technology and design, they have become difficult to find, so we will not focus on them here.

location object

Basic attributes

Location is one of the most useful BOM objects. It provides information and navigation functions for the document loaded in the current window. Its main uses are related to URLs:

　●Hash: Returns the characters after the # symbol in the URL, if not, returns empty.

　●　host/hostname: Returns the server name or port number.

● href: Returns the complete url

● Port: Returns the specified port number

● Protocol: Returns the protocol used

Search: Returns the url Query string, that is, everything from the beginning to the end of the question mark

Location operation

Location can change the location of the browser in many ways, the most commonly used is assign () method, for example:

location.assign("http://www.baidu.com");

This will immediately open a new URL and add a record to the browsing history. The following two lines of code are equivalent:

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

The most common one is location .href.

Of course, modifying other attributes can also change the currently loaded page. After modifying the URL in any way, a new record will be generated. The user can navigate to the previous page by clicking the back button. However, there are When we don't want this operation to happen, we can use the replace() method. Like the following:

location.replace("http://www.baidu.com");

It only receives one parameter, the url to navigate to, and no record will be generated, and the user cannot return to the previous page.

Another position-related method is reload(), which literally means reloading the current page, but there is a little caveat here. If it is just reload without parameters, the page will start from Reload from the browser cache. If you force a reload from the server, you need to pass parameters, like this:

location.reload(true);

history object

history Keeps records of users surfing the Internet. Each browser window and tab has its own history object associated with a specific window object. For security reasons, developers generally cannot know which web pages the user has browsed, but there are still The way to implement the forward and backward functions is go(). For example:

history.go(-1);
history.go(1);

The parameter is not only a number, but also a string. The browser will jump to the first position in the history that contains the string, either forward or backward. For example

history.go("baidu.com");

In addition, there are more direct methods back() and forward() to move forward or backward.

In addition, history also has a length attribute, which saves the number of historical records. You can use it if you want to determine whether the user opened your page from the beginning.

if(history.length == 0){
    //干你想干的事
}

The history object is not particularly commonly used, but in some special-purpose designs, it is still necessary to ask it to solve problems.

Summary

The status of the window object in the mobile Internet wave is no longer as important as that of the PC side, and it involves more functions and detection In one aspect, more interactions are involved, while other aspects are implemented by custom code with richer functions.

Despite this, the window object is not just that simple. There is also an important navigator object, but when it comes to it, there is a lot of content. I will share it with you in a separate article later.

This article comes from the

js tutorial column, welcome to learn!

The above is the detailed content of The role of the Window object in the front-end field. For more information, please follow other related articles on the PHP Chinese website!