An in-depth analysis of the window.location object to implement page jumps-JS Tutorial-php.cn

An in-depth analysis of the window.location object to implement page jumps

WBOY

Release： 2022-08-05 10:57:58

forward

3106 people have browsed it

This article brings you relevant knowledge about javascript, which mainly introduces the issues related to the window.location object to achieve page jump. The window.location object is used to obtain the address of the current page. , and redirect the browser to a new page. Let’s take a look at it. I hope it will be helpful to everyone.

An in-depth analysis of the window.location object to implement page jumps

[Related recommendations: javascript video tutorial, web front-end】

window.location object is used Get the address (URL) of the current page and redirect the browser to the new page.

window location The object can be written without using the Window prefix. Some examples:

location.hostname returns the domain name of the web host
location.pathname returns the path and file name of the current page
location.port returns the web host's Port
location.protocol returns the web protocol used

window location href

##Example

Return the URL of the current page:

<script type="text/javascript">
	    document.write(location.href);
</script>

Copy after login

The output of the above code is:

http://127.0.0.1:8848/7.11/new_file.html

Copy after login

window location pathname

location.pathname property returns the URL pathname.

Example

Return the path name of the current URL:

<script type="text/javascript">
		document.write(location.pathname);
</script>

Copy after login

The output of the above code is:

/7.11/new_file.html

Copy after login

window location Assign

The location.assign() method loads a new document.

Example

Load a new document:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="跳转到百度" onclick="newDoc()"/>
		<script type="text/javascript">
			function newDoc(){
				window.location.assign('https://www.baidu.com')
			}
		</script>
	</body>
</html>

Copy after login

Use javascript to implement page timing jump---location object

Requires the following effects:

## Code implementation ideas :

#Write an HTML page for scheduled jumps.
#Get the specified number of seconds and subtract 1 to write to the page.
When the number of seconds is greater than 0, use setTimeout() to count down in a loop.
#When the number of seconds is less than or equal to 0, use location.href to jump to the specified URL address.

The implementation code is as follows: html code:

css code:

js code:

Achievement effect:

【Related recommendations:

javascript video tutorial

, web front-end】

The above is the detailed content of An in-depth analysis of the window.location object to implement page jumps. For more information, please follow other related articles on the PHP Chinese website!