Understanding and common usage of the location object attribute in HTML documents_Basic knowledge

A simple understanding of the location object:

1. The location object covers the current page (this page) or more directly, the url information of the currently loaded HTML document

2. The location object is an attribute of the window object and can be accessed through window.location

Let’s introduce some information about URL (resource locator) by the way:

In browsers, URLs usually consist of the following parts:

[Protocol][host][path][query]

Protocol: Common protocols are:

http:// indicates that the resource file is on the web server

ftp:// indicates that the resource file is in the ftp server on the network

host: host name and port number, such as the host commonly used by local tomcat: localhost:8080

path: The path information of the project, usually composed of "/" and characters, "/" is the superior-subordinate relationship

Query: Generally starts with "?", followed by some key-value pairs (key=value). Multiple key-value pairs are separated by "&". It can be used for dynamic web pages to pass parameters. To the server side, it can be used for background operations, querying database conditions, etc., submitting form data, etc., and can be submitted here. Things involving security need to be encrypted or through other methods. . . .

You can also add parameters starting with "#" after the query, but this is not used currently, so I won't comment casually for the time being

location object attributes:

1.href attribute: The complete url information of the current page, including protocol, host name, port number, query parameters, #information, etc., all included

2.host attribute: host name and port number, such as localhost:8080 local machine

3.hostname: host name

4.port: port number in url

5.pathname: The part of the path content in the url that contains "/"

6.protocol：Protocol

7.serach: The query part starting with "?"

8.hash: Content starting with "#"

Common usage of location

Obviously, in addition to providing developers with convenient attribute information, there is also a more important and common use

Reloading the page can be used to refresh the document content, but the more important purpose is to reload the document content after modifying the href information

location.href: After assignment, the browser will refresh the content of the document according to the specified new URL

location.reload(): Reload the document

Help us solve the problem of cross-domain page:

1. Refresh the current page

window.location.href =url//I am used to using this method

self.location.href =url

location.href =url

All the above three methods can be used to refresh the current page (reload according to the specified url, which can be another brand-new document, replacing the current document)

2. When the parent page uses iframe to include the child page

The parent page refreshes the child page:

window.frames["id"].location.reload()//id is the id of the iframe in the page

3. The child page refreshes the parent page

parant.location.reload()

self.opener.location.reload()

There are many methods, and we will continue to summarize them with actual use in the future! ! ! !

Other common methods:

location.replace() //Replace the current document with a new document

location.assign() //Load new document