API lịch sử

API Lịch sử là cách trình duyệt cho phép bạn tương tác với thanh địa chỉ và lịch sử điều hướng

Giới thiệu

API Lịch sử cho phép bạntương tác với lịch sử trình duyệt,kích hoạt các phương pháp điều hướng của trình duyệtthay đổi nội dung thanh địa chỉ.

Nó đặc biệt hữu ích khi kết hợp với các Ứng dụng Trang Đơn hiện đại, trên đó bạn không bao giờ đưa ra yêu cầu từ phía máy chủ đối với các trang mới, mà thay vào đó trang luôn giống nhau: chỉ thay đổi nội dung bên trong.

Aứng dụng JavaScript hiện đạichạy trong trình duyệt không tương tác với API Lịch sử, rõ ràng hoặc ở cấp khung, sẽ là một trải nghiệm kém cho người dùng, vìcác nút quay lại và chuyển tiếp bị gãy.

Ngoài ra, khi điều hướng ứng dụng,chế độ xem thay đổi nhưng thanh địa chỉ thì không.

Và ngoài ranút tải lại bị đứt: tải lại trang, vì không có liên kết sâu, sẽ làm cho trình duyệt hiển thị một trang khác

API Lịch sử đã được giới thiệu trong HTML5 và bây giờ làđược hỗ trợ bởi tất cả các trình duyệt hiện đại. IE hỗ trợ nó kể từ phiên bản 10 và nếu bạn cần hỗ trợ IE9 trở lên, hãy sử dụngThư viện History.js.

Truy cập API lịch sử

API Lịch sử có sẵn trênwindowđối tượng, vì vậy bạn có thể gọi nó như thế này:window.historyhoặc làhistory, từwindowlà đối tượng toàn cục.

The History object

Hãy bắt đầu với điều đơn giản nhất bạn có thể làm với API Lịch sử.

Quay trở lại trang trước:

history.back()

điều này sẽ chuyển đến mục nhập trước đó trong lịch sử phiên. Bạn có thể chuyển tiếp đến trang tiếp theo bằng cách sử dụng

history.forward()

Điều này chính xác giống như sử dụng các nút quay lại và chuyển tiếp của trình duyệt.

go()cho phép bạn điều hướng trở lại hoặc chuyển tiếp nhiều cấp độ sâu. Ví dụ

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

Để biết có bao nhiêu mục nhập trong lịch sử, bạn có thể gọi

history.length

Thêm một mục vào lịch sử

Sử dụngpushState()bạn có thể tạo một mục lịch sử mới theo lập trình. Bạn truyền 3 tham số.

Đầu tiên là một đối tượng có thể chứa bất cứ thứ gì (tuy nhiên có giới hạn kích thước và đối tượng đó cần phải được tuần tự hóa).

Tham số thứ hai hiện không được các trình duyệt chính sử dụng, vì vậy bạn thường truyền một chuỗi trống.

Tham số thứ ba là một URL được liên kết với trạng thái mới. Lưu ý rằng URL cần thuộc cùng một miền gốc của URL hiện tại.

const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

Gọi điều này sẽ không thay đổi nội dung của trang và không gây ra bất kỳ hành động trình duyệt nào như thay đổiwindow.locationsẽ.

Sửa đổi các mục lịch sử

Trong khipushState()cho phép bạn thêm một trạng thái mới vào lịch sử,replaceState()cho phép bạn chỉnh sửa trạng thái lịch sử hiện tại.

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

Nếu bây giờ bạn gọi

history.back()

trình duyệt đi thẳng đến/posts, từ/post/firstđãthay thếbởi/post/second

Truy cập trạng thái nhập lịch sử hiện tại

Truy cập tài sản

history.state

trả về đối tượng trạng thái hiện tại (tham số đầu tiên được truyền chopushStatehoặc làreplaceState).

Cáconpopstatebiến cố

Sự kiện này được gọi vàowindowmỗi khi trạng thái lịch sử hoạt động thay đổi, với trạng thái hiện tại là tham số gọi lại:

window.onpopstate = event => {
  console.log(event.state)
}

sẽ ghi lại đối tượng trạng thái mới (tham số đầu tiên được truyền chopushStatehoặc làreplaceState) mỗi khi bạn gọihistory.back(),history.forward()hoặc làhistory.go().

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: