history对象 · JavaScript学习

# history 对象 [TOC] 　　window.history 对象包含浏览器历史URL集合 ## history方法 ### history.back() 和在浏览器点击后退按钮功能相同 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hisory对象</title> </head> <body> <button id="btn">回退上一页面</button> <script> function goTest(){ history.back(); } var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',goTest); // 后退 </script> </body> </html> ~~~ ### history.forward() 和在浏览器中点击按钮向前相同 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test html page</title> </head> <body> <a href="index.html">首页</a> <button id="btn">返回前一个页面</button> <script> function goOb(){ history.forward(); } var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',goOb); // 前进 </script> </body> </html> ~~~ ### history.go() 进入历史记录中的某个页面 **page1** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test html page</title> </head> <body> <a href="index.html">跳转</a> </body> </html> ~~~ **page2** ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hisory对象-history.go();模拟跳转到上一次登陆的位置</title> </head> <body> <form action=""> <input type="text" id="username" /> </form> <button id="btn">按钮</button> <script> var oBtn = document.getElementById('btn'); function check(){ var oInput = document.getElementById('username'); if(oInput.value == 'hello'){ history.go(-1); }else { alert('输入错误!'); } } oBtn.addEventListener('click',check); </script> </body> </html> ~~~