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> ~~~