用JS实现跳转网页

最新推荐文章于 2023-10-20 11:00:35 发布

夜跑者

最新推荐文章于 2023-10-20 11:00:35 发布

阅读量705

点赞数 1

分类专栏：前端路由

本文链接：https://blog.csdn.net/liubangbo/article/details/103336508

版权

前端路由专栏收录该内容

10 篇文章 0 订阅

订阅专栏

写了三个页面，demoA.html 可以跳转到pageA.html和pageB.html，pageA和pageB都可以回到demoA.html

demoA.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
 
	.curPageStyle{
		margin-top: 300px;
	}
  </style>
  <body>
    
	<button onclick="jumpA()">Go to pageA</button>

	
	<div class="curPageStyle">
		<button  onclick="currentPage()">current page: </button>
		<div id="curPageHref" style="display: inline-block"></div>
	</div>
    
    
    <script>
     
	 function jumpA(){
		window.location.href = "./pageA.html";
	 }
	 
	
	 
	 function currentPage(){
		document.getElementById("curPageHref").textContent = window.location.href;
	 }
	 
    </script>
  </body>
</html>

效果如下：

window.location.href可以显示出当前页面URL。

pageA.html代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
  
  
	.pageA{
		width: 200px;
		height: 200px;
		margin: 0 auto;
		background-color: green
	}
  </style>
  <body>
    <button onclick="jump()">Go back to demoA</button>
	
	<div class="pageA"></div>
	
	<button onclick="jumpB()">Go to pageB</button>
    
    <script>
     function jump(){
		//window.location.href = "./demoA.html";
		//window.history.go(-1);
		window.history.back();
	 }
	 
	 function jumpB(){
		window.location.href = "./pageB.html";
	 }
	 
    </script>
  </body>
</html>

通过

//window.location.href = "./demoA.html";
//window.history.go(-1);
window.history.back();

这三种方式都可以回到demoA.html页面。

pageB.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
  
	.pageB{
		width: 200px;
		height: 200px;
		margin: 0 auto;
		background-color: yellow
	}
  </style>
  <body>
    <button onclick="jump()">Go back to demoA</button>
	<div class="pageB"></div>
    
    <script>
     function jump(){
		//window.location.href = "./demoA.html";
		window.history.go(-2);
	 }
	 
    </script>
  </body>
</html>

从pageB.html可以直接回到demoA.html

夜跑者

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JS实现跳转网页

写了三个页面，demoA.html 可以跳转到pageA.html和pageB.html，pageA和pageB都可以回到demoA.htmldemoA.html 代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta...
复制链接

扫一扫