The location is introduced

  • In a browser, uselocationObject to get path information for documents loaded in the current window.
  • locationObject iswindowProperties of objects, as welldocumentProperties of the object, that is,window.location === document.locationIs true.
  • locationObjects alsoParse the URL into separate fragments, allowing developers to access these fragments through different properties.
attribute example instructions
hash #content Returns the hash in the URL, which is a # followed by zero or more characters. If there is no character after the #, it is an empty string.
host gzlaoben.xyz:10000 Returns the server name and port number, if any
hostname gzlaoben:xyz Returns the server name without the port number
href http://gzlaoben.xyz Returns the full URL of the currently loaded page. Is thelocation.toString()The value returned by the
pathname /id/14 Returns the directory and/or filename in the URL
port 8080 Returns the port number specified in the URL
protocol https: Returns the protocol used by the page
search ? name=ben Returns a query string for the URL. If the? An empty string is returned if no character is followed by the.

Query string parameters

Location. search can be returned from? To the end of the URL, but there is no way to access each query string parameter in it. To do this, we can create a function like the following that parses the query string and returns an object with all the parameters.

function getQueryStringArgs() {
    // Get the query string and remove the leading question mark
    let queryStr = location.search.length > 0 ? location.search.substring(1) : ' '
    // Use the ampersand delimiter to get each parameter key-value pair
    let queryArr = queryStr.length ? queryStr.split("&") : []
    // Save the parameter object
    let params = {}
    for (let itemStr of queryArr) {
        let item = itemStr.split('=')
        let name = decodeURIComponent(item[0])
        let value = decodeURIComponent(item[1] | |' ')
        if (name.length) {
            params[name] = value
        }
    }
    return params
}
Copy the code
  • There are two types of exceptions to watch out for when analyzing key-value pairs:
    1. There is no character between ampersand:? &&
    2. No key name:? =xxx
    3. There is no value:? xxx= 或 ? xxx&a=b
  • In order to prevent the occurrence of key values# & /Such URL key characters, thereforegetQueryStringArgsThe method is to extract the key-value pair now and use it againdecodeURIComponentMethod to decode the URI.
    1. decodeURIComponent 和 encodeURIComponentMethods can be used to; , /? : @ & = + $And other URI reserved characters are decoded and encoded.
    2. decodeURI 和 encodeURIMethod decodes and encodes characters that need to be encoded except for urI-reserved characters.
    3. URI utility functions should be designed with maximum compatibility in mind. soBefore concatenating key-value pairsUse theencodeURIComponentMethods encode the key values respectively. When the key-value pair parameter is obtained, it should be splitlocation.search 并Exclude existing URI reserved charactersUsed separately on key valuesdecodeURIComponentMethod decode.

Position operation

Uncovered jump

  1. You can uselocation.assign(url)
  2. Directly modifyinglocation.href 或 location
  3. You can useopen(url, '_self')

All of the above methods immediately open the new URL and generate a record in the browser’s history. In addition, you can tailor other properties of the Location object, as well as change the page currently loaded (changing the hash does not reload the page, but does add a history).

Covering the jump

Using the location.replace(URL) method prevents the user from retracting to the previous page and overwrites the current history.

Reload the page

The page can be reloaded using the location.reload() method. This method takes an argument: if true is passed, the browser forces a reload from the server; Otherwise the browser will try to reload from the cache.