Home  >  Article  >  Web Front-end  >  An in-depth analysis of the window.location object to implement page jumps

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

WBOY
WBOYforward
2022-08-05 10:57:583094browse

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>
The output of the above code is:

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

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>
The output of the above code is:

/7.11/new_file.html
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>

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!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete