Home > Web Front-end > JS Tutorial > 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
Release: 2022-08-05 10:57:58
forward
3127 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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template