HTML5/jQuery: pushState và popState - liên kết sâu?

Question

đầu tiên tôi không thể hình dung tham số đầu tiên trong hàm pushState là gì? Tôi phải vượt qua điều gì? Tôi chỉ muốn thay đổi url khi cuộn qua trang của tôi. Tôi đang truy vấn ID của phần tử hiện tại trong chế độ xem và ID của nó cũng phải là liên kết trong url. Điều đó hoạt động tốt với mã bên dưới.

var currentHash, 
     url; 

    if (history && history.pushState) { 

     $(window).scroll(function() { 
      hash = $('.layer:in-viewport').attr('id'); 
      catHash = $("#"+hash).parent('section').attr('id'); 

      var data = "nothing"; 

      if (catHash != undefined) 
       url = "/" + catHash + "/" + hash; 
      else 
       url = "/" + hash; 

      if (currentHash != hash) { 

       window.history.pushState(data, hash, url); 

      } 

      currentHash = hash; 

     }); 

    } 

Bây giờ tôi có hai câu hỏi:

1.) Ngay bây giờ các url trong thanh địa chỉ thay đổi thành công khi tôi di chuyển qua trang web của tôi. Làm thế nào tôi có thể truy vấn url/băm trong thanh địa chỉ khi tôi tải trang ban đầu. Vì vậy, hãy tưởng tượng tôi có một liên kết như www.url.com/deep Tôi muốn tìm hiểu những gì/sâu? Tôi chỉ đơn giản là phải truy vấn toàn bộ top.location và chia nó trên mỗi "/"? Tôi có nghĩa là các liên kết này thực sự không tồn tại, vậy làm cách nào để tránh các trang 404 khi gọi một url mà tôi đã thao tác với hàm pushState?

2.) Làm cách nào để tìm ra thay đổi cuối cùng trong thanh địa chỉ khi nhấp vào nút quay lại? Vì vậy, tôi muốn tìm /deep khi nhấp vào nút quay lại trình duyệt để tôi có thể điều hướng trở lại vị trí đó trên trang. Tôi đoán điều này có thể làm việc với popstate nhưng tôi không thể tìm ra cách nào!

Cảm ơn sự giúp đỡ của bạn!

Cập nhật:

window.history.pushState("test", hash, url); 

...

$(window).bind('popstate', function(event){ 
     console.log(event.data); 
    }); 

Đây là alway null. Không nên trả lại "thử nghiệm" này?

Answer 1

thông số đầu tiên trong hàm pushState là gì?

Từ the documentation

tượng trạng thái - Đối tượng trạng thái là một đối tượng JavaScript được kết hợp với các mục nhập lịch sử mới được tạo ra bởi pushState(). Bất cứ khi nào người dùng điều hướng đến trạng thái mới, sự kiện popstate được kích hoạt và thuộc tính trạng thái của sự kiện chứa một bản sao của đối tượng trạng thái của mục nhập lịch sử.

Vì vậy, đó là gói dữ liệu bạn chọn khi bạn quay lại trạng thái đó.

Ngay bây giờ, url trong thanh địa chỉ thay đổi thành công khi tôi cuộn qua trang của tôi. Làm thế nào tôi có thể truy vấn url/băm trong thanh địa chỉ khi tôi tải trang ban đầu.

Nhìn vào đối tượng location… nhưng bạn không cần. Bạn có thể (và nên) điền vào phía máy chủ trang. Đây là một trong những lợi thế của pushState, liên kết vẫn hoạt động nếu JavaScript không có sẵn và dự phòng phía máy chủ được tích hợp thông suốt.

Làm cách nào để tìm ra thay đổi cuối cùng trong thanh địa chỉ khi nhấp vào nút quay lại?

Bạn thêm trình xử lý sự kiện (tìm kiếm sự kiện popState) và dữ liệu bạn lưu trữ trong đó sẽ có sẵn trên đối tượng sự kiện. MDN has an example

Answer 2

jQuery tóm tắt các đối tượng sự kiện, bạn muốn: event.originalEvent.state;