Ở bài viết này chúng ta sẽ tìm hiểu về đối tượng window history trong javascript. Nghe từ history làm chúng ta mường tượng nó sẽ liên quan đến lịch sử đúng không. Đúng vậy nó chính là lịch sử truy cập của trình duyệt, trình duyệt của mình thì lịch sử trắng luôn. Nên cái này cũng không ảnh hưởng gì nhiều vì toàn quen tay Ctrl shift N hehe :D. Mình xin được bắt đầu bài viết.
Window history
Đối tượng history cung cấp phương thức để di chuyển đến các trang trước hay sau trang hiện tại trong lịch sử truy cập. (Tuy nhiên, vì lý do bảo mật, JavaScript không thể truy cập URI của những site mà trình duyệt đã ghé thăm. Cụ thể, bạn có thể sử dụng phương thức back(), forward(). Phương thức back() trả về trang trước đó còn forward() trả về trang kế tiếp.
history.back()
Phương thức này sẽ tải liên kết trước đó mà bạn truy cập. Điều này giống như cách nhấn nút ← trên trình duyệt.
Để làm ví dụ này ta cần khởi tạo 2 file html
- file thứ nhất sẽ tạo liên kết đến file thứ hai bằng thẻ
<a>
- file thứ hai chứa phương thức
history.back()
file 1.html
<!DOCTYPE html> <html> <head> <title>file 1</title> </head> <body> <h3><a href="2.html">click</a> để đi tới file thứ 2</h3> </body> </html>
file 2.html
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Click goto nguyenvanhieu.vn</h1> <button>click</button> <script type="text/javascript"> var x = document.getElementsByTagName('button') //truy xuất button x[0].onclick = x[0].onclick = function(){ window.history.back(); } //thêm sự kiện onclick gán phương thức history.back() </script> </body> </html>
Khi bạn click vào nút button
ở trên thì nó sẽ quay lại file 1.html
history.forward()
Phương thức history.forward ()
sẽ tải liên kết tiếp theo trong danh sách lịch sử. Điều này giống như ta click vào nút → trên trình duyệt.
Ví dụ thì các bạn làm tương tự phương thức history.back()
Okê xong rồi đấy chỉ có vậy thôi, tuy ngắn mà gọn, đối tượng này chỉ có vậy thôi chứ nó không truy cập được lịch sử lướt web của bạn đâu :D. Mình xin được kết thúc bài viết tại đây.
Xem bài viết tiếp theo tại đây.
Để lại một bình luận