0
点赞
收藏
分享

微信扫一扫

JS基础-History-尚硅谷-P125

悄然丝语 2022-01-31 阅读 77

视频链接
视频
代码:
50-History.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>History</title>
		<script type="text/javascript">
		/**
		 * History可用来操作浏览器向前或向后翻页
		 */
	
		window.onload=function(){
			var btn01=document.getElementById("btn01");
			btn01.onclick=function(){
				// alert(history.length);
				/**
				 * back 回退到上一个页面 作用和浏览器回退按钮一样的
				 */
				history.back();		
			}
			var btn02=document.getElementById("btn02");
			btn02.onclick=function(){
				/**
				 * forward()
				 * ---可以跳转到下个页面,作用和浏览器向前按钮一样的
				 */
				history.forward();
			}
			/**
			 * go()
			 * --------需要一个整数作为参数
			 * -----1:向前跳转一个页面
			 * -----2:向前跳转两个页面
			 * -----  -1:向后跳转一个页面
			 * -----  -2:向后跳转两个页面
			 */
		}
		</script>
	</head>
	<body>
		<h1>History</h1>
		<button id="btn01">back</button>
		<button id="btn02">forward</button>
	</body>
</html>

50_01test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>test01</h1>
		<a href="50_02test.html">02</a>
	</body>
</html>

50_02test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test_02history</title>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<h1>去history</h1>
		<a href="50-History.html">去history</a>
	</body>
</html>

举报

相关推荐

0 条评论