<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>uvi</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <button id="btn" onclick="goceshi()">按钮</buton> <script> function goceshi(){ history.back(); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>uvi</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <a href="index9.html">跳转到index.html页面</a> <button id="btn" onclick="">按钮</button> <script> function goindex9(){ history.forward(); } </script> </body> </html>
下面的例子演示：点击ceshi.html的链接跳转到index10.html登陆页面，然后输入正确的用户名（"hello"）后又返回到之前的页面ceshi.html
即利用了history.go(-1)
ceshi.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>uvi</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <a href="index10.html">跳转到index.html页面</a> 10 11 </body> 12 </html>
index10.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>uvi</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <form> 10 <input type="text" id="username"> 11 </form> 12 <button id="btn" onclick="safe()">按钮</button> 13 <script> 14 function safe(){ 15 var name = document.getElementById("username").value; 16 alert(username); 17 if(name=="hello"){ 18 history.go(-1);//回到之前的界面 19 }else{ 20 alert("输入错误"); 21 } 22 } 23 </script> 24 25 </body> 26 </html>