Location object of Browser in JavaScript

Summary

The Location object contains information about the current URL.

The Location object is part of the window object and can be accessed through the window.location property.

grammar

// The hash property returns the anchor part of a URL
window.location.hash

// The host property returns the hostname and port of a URL
window.location.host

// The hostname property returns the hostname of the URL
window.location.hostname

// The href attribute will return the full URL
window.location.href

// The URL pathname that the pathname property will return
window.location.pathname

// The port property returns the port number used by the URL server
window.location.port

// The protocol property will return a URL protocol
window.location.protocol

// The search property returns the query part of a URL
window.location.search

// The assgin() method loads a new document
// Parameter Description: URL is the address of the new document
window.location.assign(URL)

// The reload() method reloads the current document, which is equivalent to refreshing the page
// Parameter Description: forceGet is a Boolean type parameter, which is optional.
// If the parameter of this method is set to true, no matter what the last modification date of the document is, it will bypass the cache and download the document from the server again.
window.location.reload(forceGet)

// Replace the current document with a new document
// Parameter Description: newURL is the address of the new document
window.location.replace(newURL)

Location object properties

attribute describe Example
hash The hash property is a readable and writable string that is the anchor part of the URL (the part starting with the #). Returns the main part of a URL. If the current URL is http://127.0.0.1:8848/Demo/index.html #ABC, the output result of console.log(window.location.hash) is "ABC".
host The host property is a readable and writable string that sets or returns the host name and port number of the current URL. Returns the hostname and port of the current URL. If URL is http://127.0.0.1:8848/Demo/index.html The output of console.log(window.location.host) is "127.0.0.1:8848".
hostname The hostname property is a readable and writable string that sets or returns the hostname of the current URL. Returns the hostname of the current URL. If URL is http://127.0.0.1:8848/Demo/index.html The output of console.log(window.location.hostname) is "127.0.0.1".
href The href property is a readable and writable string that sets or returns the full URL of the currently displayed document. Return the full URL of the current page, or reset the URL of the current page. If URL is http://127.0.0.1:8848/Demo/index.html , the output result of console.log(window.location.href) is "http://127.0.0.1:8848/Demo/index.html".
pathname The pathname property is a readable and writable string that sets or returns the path part of the current URL. Returns the pathname of the current page URL. If URL is http://127.0.0.1:8848/Demo/index.html The output result of console.log(window.location.pathname) is "/ Demo/index.html".
port The port property is a read-write string that sets or returns the port portion of the current URL. Note: if the port number is 80 (this is the default port number), you do not need to specify it. Returns the port number of the current URL. If URL is http://127.0.0.1:8848/Demo/index.html The output of console.log(window.location.port) is "8848".
protocol The protocol property is a readable and writable string that sets or returns the protocol for the current URL. Returns the protocol part of the current URL. If URL is http://127.0.0.1:8848/Demo/index.html , the output result of console.log(window.location.protocol) is "http:".
search The search property is a readable and writable string that sets or returns the query part of the current URL (after the question mark). Returns the query part of the current URL. If the URL is“ http://127.0.0.1:8848/Demo/index.html "Username = Admin & password = 123456", then the output of console.log(window.location.search) is "username = Admin & password = 123456".

Location object method

Method Explain Parameter description
assign(URL) Load a new document. URL is the address of the new document
reload(forceGet)

The reload() method reloads the current document, which is equivalent to refreshing the page.  

forceGet is a Boolean type parameter, which is optional. If the parameter of this method is set to true, no matter what the last modification date of the document is, it will bypass the cache and download the document from the server again.
replace(newURL) Replace the current document with a new one. newURL is the address of the new document

Example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<button type="button" οnclick="toAssign()">Load new document</button>
		<button type="button" οnclick="toReload()">Reload current document (refresh)</button>
		<button type="button" οnclick="toReplace()">Replace the current document with a new document</button>

		<script type="text/javascript">
			console.log("Return URL Anchor part of:" + window.location.hash);
			console.log("Return URL Host name and port for:" + window.location.host);
			console.log("Return URL Host name of:" + window.location.hostname);
			console.log("Return URL Full address:" + window.location.href);
			console.log("Return URL Pathname for:" + window.location.pathname);
			console.log("Return URL Port number used by the server:" + window.location.port);
			console.log("Return URL Agreement:" + window.location.protocol);
			console.log("Return URL Query part of:" + window.location.search);

			function toAssign() {
				// You can still go back to the previous page with the back button
				window.location.assign("http://www.baidu.com");
			}

			function toReload() {
				// Refresh current page
				window.location.reload();
			}

			function toReplace() {
				// After replacement, you cannot click the back button to go back to the previous page
				window.location.replace("http://www.baidu.com");
			}
		</script>
	</body>
</html>

 

415 original articles published, 43 praised, 100000 visitors+
Private letter follow

Tags: Attribute Javascript

Posted on Sat, 01 Feb 2020 23:20:07 -0800 by Jocke