Tôi đang xem xét sử dụng API Lịch sử HTML5 để giải quyết các vấn đề liên kết sâu với nội dung được tải AJAX, nhưng tôi đang cố gắng để khởi đầu. Có ai biết bất kỳ nguồn lực tốt?
Tôi muốn sử dụng điều này vì nó có vẻ là một cách tuyệt vời để cho phép khả năng những người được gửi các liên kết có thể không bật JS. Nhiều giải pháp thất bại khi ai đó có JS gửi liên kết đến ai đó mà không có.
Nghiên cứu ban đầu của tôi dường như chỉ ra API Lịch sử trong JS và phương thức PushState.
Câu trả lời:
Để có một hướng dẫn tuyệt vời, trang Mozilla Developer Network về chức năng này là tất cả những gì bạn cần: https://developer.mozilla.org/en/DOM/Manipulation_the_browser_history
Thật không may, API Lịch sử HTML5 được triển khai khác nhau trong tất cả các trình duyệt HTML5 (khiến nó không nhất quán và có lỗi) và không có dự phòng cho các trình duyệt HTML4. May mắn thay, History.js cung cấp khả năng tương thích chéo cho các trình duyệt HTML5 (đảm bảo tất cả các trình duyệt HTML5 hoạt động như mong đợi) và tùy chọn cung cấp dự phòng băm cho các trình duyệt HTML4 (bao gồm hỗ trợ duy trì cho dữ liệu, tiêu đề, chức năng PushState và thay thếState).
Bạn có thể đọc thêm về History.js tại đây: https://github.com/browserstate/history.js
Để biết bài viết về Hashbang VS Hashing VS Lịch sử HTML5, hãy xem tại đây: https://github.com/browserstate/history.js/wiki/Intellect-State-Handling
Tôi đã hưởng lợi rất nhiều từ 'Đi sâu vào HTML 5'. Các giải thích và demo là dễ dàng hơn và đến điểm. Chương lịch sử - http://diveintohtml5.info/history.html và bản demo lịch sử - http://diveintohtml5.info/examples/history/fer.html
Hãy ghi nhớ trong khi sử dụng HTML5 Pushstate nếu người dùng sao chép hoặc đánh dấu một liên kết sâu và truy cập lại, đó sẽ là một máy chủ trực tiếp tấn công 404, vì vậy bạn cần sẵn sàng cho nó và thậm chí thư viện js của Pushstate sẽ không giúp đỡ bạn. Giải pháp đơn giản nhất là thêm quy tắc viết lại vào máy chủ Nginx hoặc Apache của bạn như vậy:
Apache (trong vhost của bạn nếu bạn đang sử dụng một):
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>Nginx
rewrite ^(.+)$ /index.html last;
Thông số lịch sử HTML5 là kỳ quặc.
history.pushState()không tự mình gửi một popstatesự kiện hoặc tải một trang mới. Nó chỉ có nghĩa là để đẩy nhà nước vào lịch sử. Đây là một tính năng "hoàn tác" cho các ứng dụng trang đơn. Bạn phải tự gửi một popstatesự kiện hoặc sử dụng history.go()để điều hướng đến trạng thái mới. Ý tưởng là một bộ định tuyến có thể lắng nghe popstatecác sự kiện và thực hiện điều hướng cho bạn.
Một số điều cần lưu ý:
history.pushState()và history.replaceState()không gửi popstatecác sự kiện.history.back(), history.forward()và các nút quay lại và chuyển tiếp của trình duyệt thực hiện popstatecác sự kiện.history.go()và history.go(0)thực hiện tải lại toàn bộ trang và không gửi popstatecác sự kiện.history.go(-1)(quay lại 1 trang) và history.go(1)(chuyển tiếp 1 trang) để gửi popstatecác sự kiện.Bạn có thể sử dụng API lịch sử như thế này để đẩy trạng thái mới VÀ gửi một sự kiện popstate.
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
Sau đó lắng nghe các popstatesự kiện với một bộ định tuyến.
new PopStateEvent(...)dường như không hoạt động trong IE11? Có một cách giải quyết mà bất cứ ai biết?
var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
Bạn có thể thử Davis.js , nó cung cấp cho bạn định tuyến trong JavaScript của bạn bằng cách sử dụng PushState khi có sẵn và không có JavaScript, nó cho phép mã phía máy chủ của bạn xử lý các yêu cầu.
Dưới đây là một màn hình tuyệt vời về chủ đề của Ryan Bates của railscasts. Cuối cùng, anh ta chỉ vô hiệu hóa chức năng ajax nếu phương thức history.pushState không khả dụng:
Bạn có thể muốn xem qua plugin jQuery này. Họ có rất nhiều ví dụ trên trang web của họ. http://www.asual.com/jquery/address/
Tôi đã viết một bản tóm tắt bộ định tuyến rất đơn giản trên đầu trang History.js , được gọi là StateRouter.js . Đó là trong giai đoạn đầu phát triển, nhưng tôi đang sử dụng nó làm giải pháp định tuyến trong một ứng dụng một trang mà tôi đang viết. Giống như bạn, tôi thấy History.js rất khó nắm bắt, đặc biệt là khi tôi còn khá mới với JavaScript, cho đến khi tôi hiểu rằng bạn thực sự cần (hoặc nên có) một sự trừu tượng hóa định tuyến trên nó, vì nó giải quyết được mức độ thấp vấn đề.
Mã ví dụ đơn giản này sẽ cho thấy cách nó được sử dụng:
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();Đây là một mẹo nhỏ tôi đã pha chế để chứng minh việc sử dụng nó.
nếu jQuery có sẵn, bạn có thể sử dụng jQuery BBQ