Tôi đang phát triển một ứng dụng web. Trong đó, tôi có một phần gọi là danh mục mà mỗi khi người dùng nhấp vào một trong các danh mục, bảng cập nhật sẽ tải nội dung thích hợp.
Sau khi người dùng nhấp vào danh mục, tôi muốn thay đổi url thanh địa chỉ của trình duyệt từ
www.mysite.com/products
một cái gì đó giống như
www.mysite.com/products/{selectedCat}
mà không làm mới trang.
Có một số loại API JavaScript mà tôi có thể sử dụng để đạt được điều này không?
Câu trả lời:
Với HTML5, bạn có thể sửa đổi url mà không cần tải lại:
Nếu bạn muốn tạo một bài viết mới trong lịch sử của trình duyệt (tức là nút quay lại sẽ hoạt động)
window.history.pushState('Object', 'Title', '/new-url');
Nếu bạn chỉ muốn thay đổi url mà không thể quay lại
window.history.replaceState('Object', 'Title', '/another-new-url');
Đối tượng có thể được sử dụng để điều hướng ajax:
window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');
window.onpopstate = function (e) {
var id = e.state.id;
load_item(id);
};
Đọc thêm tại đây: http://www.w3.org/TR/html5-author/history.html
Một cảnh báo dự phòng: https://github.com/browserstate/history.js
Để thêm vào những gì những người đã nói, hãy chỉnh sửa thuộc tính window.location.hash để khớp với URL bạn muốn trong hàm onclick của mình.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
Tôi tin rằng việc điều khiển trực tiếp thanh địa chỉ đến một url hoàn toàn khác mà không di chuyển đến url đó không được phép vì lý do bảo mật, nếu bạn hài lòng với nó
www.mysite.com/products/#{selectedCat}
tức là một liên kết kiểu neo trong cùng một trang sau đó xem xét các tập lệnh lịch sử / "nút quay lại" khác nhau hiện có trong hầu hết các thư viện javascript.
Việc đề cập đến bảng cập nhật khiến tôi đoán bạn đang sử dụng asp.net, trong trường hợp đó, kiểm soát lịch sử ajax của asp.net là một nơi tốt để bắt đầu
Tôi không nghĩ điều này có thể xảy ra (ít nhất là thay đổi sang một địa chỉ hoàn toàn khác), vì nó sẽ là một hành vi lạm dụng thanh địa chỉ một cách không trực quan và có thể thúc đẩy các cuộc tấn công lừa đảo.
"window.location.hash"
như được đề xuất bởi sanchothefat nên là cách duy nhất để làm điều đó. Bởi vì tất cả những nơi mà tôi đã thấy tính năng này, tất cả đều nằm sau URL # trong.
pathvà / hoặcquery stringtrong URL; họ không thể thay đổi giao thức, miền hoặc cổng (vì đó sẽ là một vấn đề bảo mật như những người khác đã chỉ ra). Cáchashchức năng trên có thể thay đổi neo (hoặc id fragment)