BOM programming: location object

The difference between the location of the document object and the window object

The document object's location get step is to return the location object of this related global object, if this is fully active, otherwise null.

The position acquisition step of the Window object is to return its position object. Each Window object is associated with a unique instance of a Location object that was allocated when the Window object was created.

location

A location object provides a representation of the URL of its associated document, as well as methods for navigating and reloading associated navigable files.

Property Overview

attribute name	value
href	Returns the URL of a location object. Can be set to navigate to a given URL
origin	Returns the origin of the URL of the location object
protocol	Returns the scheme of the URL of the location object. Can be set to navigate to the same URL with a changed scheme.
host	Returns the host and port (if different from the scheme's default port) of the URL of the Location object. Can be set to navigate to the same URL as the changed host and port.
hostname	Returns the host of the URL of the location object. Can be set to navigate to the same URL with a changed host
port	Returns the port of the URL of the location object. Can be set to navigate to the same URL with a changed port
pathname	Returns the path to the URL of the location object. Can be set to navigate to the same URL with a changed path
search	A query that returns the URL of a location object (including the leading "?" if non-empty). Can be set, navigating to the same URI with a changed query
hash	Returns the URL fragment of the Location object (including the leading "#" if non-empty). Can be set, navigating to the same URL with a changed fragment
assign(url)	Navigates to a given URL
replaace(url)	Removes the current page from the session history and navigates to the given URL
reload()	Reload the current page.
ancestorOrigins	Returns a DOMStringList object listing the origins of the ancestor navigable active document

basic example

location.href: Returns the URL of the location object. Can be set to navigate to a given URL

console.log(location.href);

location.protocol: Returns the scheme of the URL of the location object. Can be set to navigate to the same URL with a changed scheme. That is, the protocol that returns the current URL.

console.log(location.protocol);

location.host: Returns the host and port (if different from the scheme's default port) of the URL of the Location object. Can be set to navigate to the same URL as the changed host and port.

console.log(location.host);

location.hostname: Returns the host of the URL of the location object. Can be set to navigate to the same URL with a changed host

console.log(location.hostname);

location.port: Returns the port of the URL of the location object. Can be set to navigate to the same URL with a changed port

console.log(location.port);

The URL is http://localhost:8088/, the returned value

location.hash: returns the URL fragment of the Location object (including the leading "#" if non-empty). Can be set, navigating to the same URL with a changed fragment

console.log(location.hash);

The URL is http://localhost:8088/#index, and the returned value

location.search: | Returns the query for the URL of the location object (including the leading "?" if non-empty). Can be set to navigate to the same URL with a changed query (ignoring the leading "?")

console.log(location.search);

The URL is http://localhost:8088/?name=hello, the returned value

assign(url): navigate to the given URL

<button id="link_btn">点击跳转页面</button>

 let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    
    
    location.assign('http://www.baidu.com');
  });

When we click the button, it will jump to the Baidu page.

replace(url): removes the current page from the session history and navigates to the given URL

 let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    
    
    location.assign('http://www.baidu.com');
  });

When we click the button, we will jump to the Baidu page. At the same time, we see that the back button of the browser navigation is still gray, that is, there is no record that can be rolled back, which means that the current URL has replaced the previous browsing record, not generated new record.

location.relaod(): Reload the current page.

let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    
    
    location.reload();
  });

When we click the button, the current page will be reloaded, that is, the current page will have a refreshing process.

The above is an example of the basic properties of location.