Hướng dẫn sử dụng Javascript History API

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- window.history

Mỗi một Tab hoặc một Frame đều có một đối tượng history của nó, và mỗi đối tượng history đều chứa một tham chiếu tới 1 đối tượng đặc biệt được gọi là "Joint Session History". Đối tượng đặc biệt này quản lý tất cả các đối tượng history của trình duyệt.
Sử dụng cú pháp window.history (Hoặc đơn giản là history) để truy cập vào lịch sử của Tab hoặc Frame hiện tại.
Danh sách các trang trong Lịch sử sẽ thay đổi thế nào nếu bạn đang đứng tại 1 trang trong lịch sử và nhẩy đến một trang khác không thuộc vào lịch sử.
Chú ý: Nhẩy đến một trang khác không thuộc vào lịch sử nghĩa là bạn không sử dụng nút BACK, FORWARD và không gọi một trong các phương thức history.back(), history.forward(), history.go(). Bạn có thể nhẩy đến một trang mới không thuộc vào lịch sử bằng cách nhấn vào một liên kết có URL khác với URL hiện tại, hoặc nhập một URL mới và nhấn Enter,..
Trước khi nhẩy đến một trang mới:
Sau khi nhẩy đến trang mới:

2- Properties

history.length

Trả về số thực thể đang được quản lý trong đối tượng lịch sử của Tab (hoặc Frame) hiện tại.

history.scrollRestoration

Khi bạn gọi một trong các hàm back(), forward(), go() hoặc sử dụng nút BACK, FORWARD để nhẩy đến một trang trong lịch sử. Sau khi trang lịch sử hiển thị, trình duyệt cố gắng khôi phục (restore) lại ví trí cuộn (scroll) của các thanh cuộn (scrollbar) cho trang này. Cách khôi phục phụ thuộc vào giá trị của history.scrollRestoration.
history.scrollRestoration có 2 giá trị là "auto" hoặc "manual". Mặc định "auto".
history.scrollRestoration = "auto"
Trình duyệt sẽ làm nhiệm vụ khôi phục vị trí cuộn của các thanh cuộn cho bạn.
history.scrollRestoration = "manual"
Bạn phải tự xử lý việc khôi phục vị trí cuộn của các thanh cuộn. Để làm được việc này thông tin vị trí cuộn của thanh cuộn cần được lưu trữ trong mỗi thực thể của Lịch sử. Xem thêm phương thức history.pushState(..).
Video dưới đây cho bạn thấy sự khác biệt của các giá trị "auto""manual":

3- Methods

Các phương thức của history:
  • go([delta])
  • back()
  • forward()
  • pushState(data,title[,url])
  • replaceState(data,title[,url])

history.go([delta])

Lùi lại (back) hoặc tiến (forward) delta bước trong Lịch sử. Nếu tham số delta = 0 hoặc không được cung cấp, trình duyệt sẽ tải lại (reload) trang hiện tại. Nếu delta nằm ngoài các giá trị cho phép, trình duyệt sẽ không làm gì cả.

history.back()

Lùi lại (back) một bước trong Lịch sử. Nó tương đương với việc gọi phương thức history.go(-1). Nếu không có trang trước (previous page) trong Lịch sử, trình duyệt không làm gì cả.

history.forward()

Tiến (forward) một bước trong Lịch sử. Nó tương đương với việc gọi phương thức history.go(1). Nếu không có trang kế tiếp (next page) trong Lịch sử, trình duyệt không làm gì cả.
 

pushState(data,title[,url])

Tạo ra một thực thể (một trang) trong lịch sử.

replaceState(data,title[,url])

Cập nhập thực thể hiện tại trong lịch sử.

4- history.pushState()

Sử dụng hash bạn có thể tạo ra các thực thể trong lịch sử, cách này giúp bạn có được các thực thể trong lịch sử trong khi trình duyệt không cần phải tải lại (reload) trang.
Hãy xem một ví dụ history với hash:

history.pushState(dataState, title [,url])

Phương thức history.pushState(..) cho phép bạn tạo ra một thực thể trong lịch sử (Mà URL có thể không cần thay đổi), điều này có ích trong các ứng dụng một trang đơn nhất (Single Page).
Khi người dùng nhẩy đến một thực thể (một trang) trong lịch sử, mà thực thể này được tạo ra bởi việc sử dụng phương thức history.pushState(), nó sẽ tạo ra sự kiện popstate.
Các tham số:
dataState
Một đối tượng lưu trữ trạng thái của thực thể. Có rất nhiều thứ bạn có thể lưu trữ trong đối tượng này, chẳng hạn vị trí cuộn của các thanh cuộn, điều này giúp bạn khôi phục lại vị trí thanh cuộn một cách thủ công,...
title
Tham số title chỉ có ý nghĩa như một gợi ý, các trình duyệt thường không sử dụng tham số này đề thiết lập tiêu đề cho document.
url
Tham số url không bắt buộc, nếu được cung cấp nó phải cùng nguồn gốc (same origin) với URL hiện tại của trang.

Example:

pushState-example.js
function showHistory()  {
   console.log(window.history);
   var log = document.getElementById("log-area");
   log.value="";
   log.value +="history.length="+ history.length +"\n";
   log.value +="history.scrollRestoration="+history.scrollRestoration+"\n";
   log.value +="history.state="+ JSON.stringify(history.state)+"\n";
}

function popstateHandler(popstateEvent)  {
    console.log(popstateEvent );
    document.title = popstateEvent.state.title;
    showHistory();
}

// popstate event handler:
window.onpopstate = popstateHandler;

var number = 0;

function call_pushState()  {
    number = number + 1;
    var title = "State "+ number;

    var dataState = {
         empId : number,
         showProfile: true,
         title: title
    };

    window.history.pushState(dataState, title);
    document.title = title;

    // Show current History:
    showHistory();
}
pushState-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>history.pushState()</title>
      <meta charset="UTF-8">
      <meta http-equiv="pragma" content="no-cache">

      <style>textarea {width:100%;margin-top:10px;}</style>

      <script src="pushState-example.js"></script>
      
   </head>
   <body onpageshow="showHistory()">

       <h2 id="my-h2">history.pushState(..)</h2>

      <button onclick="call_pushState()">
        Call history.pushState(..)
      </button>
      <br/><br/>

      <button onclick="history.back()">history.back()</button>
      <button onclick="history.forward()">history.forward()</button>
      <br/>

      <textarea rows="8" id="log-area"></textarea>

   </body>
</html>

 

5- history.replaceState()

history.replaceState(dataState, title [,url])

Phương thức history.replaceState(..) cập nhập dữ liệu trạng thái, tiêu đề, và URL cho thực thể hiện tại trong Lịch sử.
Các tham số:
dataState
Một đối tượng lưu trữ trạng thái của thực thể.
title
Tham số title chỉ có ý nghĩa như một gợi ý, các trình duyệt thường không sử dụng tham số này đề thiết lập tiêu đề cho document.
url
Tham số url không bắt buộc, nếu được cung cấp nó phải cùng nguồn gốc (same origin) với URL hiện tại của trang.

6- Sự kiện popstate

Sự kiện popstate xẩy ra khi người dùng nhẩy đến một trang (một thực thể) trong lịch sử được tạo ra bởi việc sử dụng phương thức history.pushState(..) hoặc history.replaceState(..).
Bạn có thể lắng nghe sự kiện popstate bằng cách thêm bộ lắng nghe sự kiện (even listener) vào cho đối tượng window.
window.addEventListener(‘popstate’. function(popstateEvent)  {
    // Do something here!
)};
Hoặc sử dụng thuộc tính (property) window.onpopstate:
window.onpopstate = function(popstateEvent). {
    // Do something here!
};
  • TODO Link!

Xem thêm các chuyên mục: