Đối tượng History trong JavaScript
Đối tượng History trong JavaScript là gì? Cú pháp như thế nào? Có những phương thức nào thể hiện? Mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây để tìm hiểu rõ về đối tượng History.
Mục lục nội dung
1. Đối tượng history trong Javascript
Đối tượng history trong Javascript đại diện cho một loạt các URL được truy cập bởi người sử dụng. Bằng cách sử dụng đối tượng này, bạn có thể tải lại trang trước, trang sau hoặc bất kỳ trang cụ thể nào.
Đối tượng history là thuộc tính của đối tượng window, vì vậy nó có thể được truy cập bởi:
window.history
Hoặc:
history
2. Các thuộc tính của đối tượng history trong JavaScript
Chỉ có 1 thuộc tính của đối tượng history.
| No. | Thuộc tính | Mô tả |
|---|---|---|
| 1 | length | Trả về số lượng của URL lịch sử. |
Cú Pháp:
history.length;
VD:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com demo history</title>
</head>
<body>
<p>Click vào button để xem kết quả</p>
<button type="button" onclick="getLenghth()">Click</button>
<script type="text/javascript">
function getLenghth() {
alert(history.length);
}
</script>
</body>
</html>
3. Các phương thức của đối tượng history trong JavaScript
Chỉ có 3 phương thức của đối tượng history.
| No. | Thuộc tính | Mô tả |
|---|---|---|
| 1 | forward() | Tải lại trang tiếp theo. |
| 2 | back() | Tải tại trang trước. |
| 3 | go() | Tải lại trang cụ thể. |
Ví dụ về phương thức back()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com demo history</title>
</head>
<body>
<p>Click vào button để xem kết quả</p>
<button type="button" onclick="getBack()">Click</button>
<script type="text/javascript">
function getBack() {
history.back();
}
</script>
</body>
</html>
Ví dụ về phương thức get back()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Toidicode.com demo history</title>
</head>
<body>
<p>Click vào button để xem kết quả</p>
<button type="button" onclick="getBack()">Click</button>
<script type="text/javascript">
function getBack() {
//quay về trang vừa load cách đây 2 lần
history.go(-2);
}
</script>
</body>
</html>
Trên đây là bài viết của eLib.VN về Đối tượng History trong JavaScript. Đối tượng này rất ít khi được sử dụng trong Javascript nhưng nếu ứng dụng của bạn có chứa chức năng back, forward thì bạn cũng nên dùng đối tượng này.
Tham khảo thêm
- doc Đối tượng Browser trong JavaScript
- doc Đối tượng window trong JavaScript
- doc Đối tượng Navigator trong JavaScript
- doc Đối tượng Screen trong JavaScript
- doc Cookie trong JavaScript
