29. location object

location yes window An attribute in an object , Used to get , Set up , Parse the form url(Unifrom Resource Locator, The Chinese name is unified resource locator , Commonly known as address ), Because this property returns an object , So we call this property location object

url It usually consists of the following parts

• query Also called query string

1 First time to know location

localtion Objects have the following common properties

Let's look at it in code

• The percent sign plus two numbers is the reason for the Chinese symbol

If you want to set location.href Just assign a value to this property

In this way, when you open this page with a browser, you will jump to Baidu

2   Automatically jump to the page after five seconds

Sometimes we visit a route that the website doesn't have at all , Under normal circumstances, it will report 404, We don't want to build one 404, Then we need to capture 404 Error of , Then redirect it (302) A customized page , We will do the function of this page next

I don't need the back-end framework , Just make a five second jump page , Jump to Baidu in five seconds

It turns on like this

Jump to Baidu in five seconds

Some websites remind you to register successfully , It can also 5s Jump to the home page , If you want to use the countdown effect, use setInterval(),setInterval() There is no need to clear the timer , The timer clears automatically after page Jump

3   Get between different addresses url Parameters

We have two pages , One is login.html, The other is index.html, stay login.html The user needs to fill in a string to index.html

Click to log in ,index Different results will be given according to the user name

login.html This is the code for

index.html This is the code for

There is a better way to parse the query string , Now let's look at the process of parameter passing , And it is impossible to input Chinese in this way , stay index.html There's a lot of garbled code in it

login.html And index.html Put it in the same directory

4   Common methods

4.1  location.assign()

Click the button and you will jump to Baidu

• Use location.assign() It is possible to retreat , to location.href Assignment can also be reversed

location.assign() And location.href Will record browsing history , So you can go back to the page

4.2  location.replace()

Click the button and you will jump to Baidu , Use location.replace() You can't go back

location.replace() Browsing history cannot be recorded , So you can't go back

4.3  location.reload

It is equivalent to refreshing the page

Without parameters, the default parameter is false, Equivalent to normal refresh , Clicking the button will refresh the current page , It is equivalent to clicking the refresh button

If you give parameters true, It is equivalent to a strong brush on the browser (ctrl+F5), A strong brush will erase some of the previously cached images and reload

Our current page is very simple, so there is no difference , If you make a static file image and display it in the web page , Then you change the still image , That makes a difference