2012-12-18 31 views
18

SoundCloud là một trang web tuyệt vời sử dụng HTML5 và Backbone.js. Điều duy nhất là, tôi không thể tìm thấy công nghệ mà họ sử dụng cho phép âm nhạc tiếp tục chơi ngay cả khi đang thay đổi các trang.Tiếp tục phát lại nhạc ngay cả khi thay đổi các trang

Công nghệ nào họ đang sử dụng để phát luồng âm thanh?

+0

Tôi cho rằng đó là "ứng dụng một trang", có nghĩa là bạn không bao giờ thực sự kích hoạt tải lại toàn bộ trang. –

+0

nhưng URL chenged – rayking

+0

họ sử dụng pushState –

Trả lời

21

Thực tế là, bạn không tải trang mới, nhưng nội dung được tải qua AJAX.

Trang sau đó sử dụng API lịch sử HTML5 để thêm khả năng Điều hướng bằng cách sử dụng nút quay lại và tiến trình của trình duyệt.

tôi bắt đầu vào chủ đề này bằng cách đọc và cố gắng ra hai nguồn sau:

http://diveintohtml5.info/history.html
http://html5demos.com/history


Cách đơn giản nhất là để nạp và thay thế các nội dung hiện tại thông qua AJAX và sau đó gọi

history.pushState(null, null, link.href); 

Để thêm mục nhập lịch sử của biểu đồ tly hiển thị trang.

Nếu bây giờ bạn nhấn nút quay lại, trình duyệt sẽ không tải trang trước đó, nhưng kích hoạt sự kiện popState. Điều này có thể được sử dụng để khôi phục trang trước đó bằng cách sử dụng AJAX hoặc thông tin được lưu trữ trong các biến JavaScript của bạn.

window.addEventListener("popstate", function(e) { 
    //loadPreviousPage(); 
} 
Các vấn đề liên quan