Làm thế nào để các trang web tin tức Eg Forbes / Zdnet kết hợp liền mạch một trang web với nhau?

Nếu bạn đi đến Eg:

Khi bạn xuống đến cuối trang, một câu chuyện Tin tức mới sẽ tải và URL trong Trình duyệt Internet của tôi sẽ thay đổi thành URL của Câu chuyện tin tức tiếp theo này. Vì vậy, tôi đã tự hỏi làm thế nào một trang web có thể tải trang web tiếp theo gần như ngay lập tức với độ trễ gần như không đáng kể giữa các trang. Có phải họ ví dụ Tải trước trang web của câu chuyện Tin tức tiếp theo, và sau đó tải trang web thực sự nhanh?

— zordman
nguồn

Bấm và giữ Endphím và bạn sẽ thấy độ trễ của quá trình tải.

— MonkeyZeus

Câu hỏi quan trọng hơn là tại sao họ làm điều đó.

Câu trả lời:

Câu trả lời ngắn gọn là mã Javascript phía máy khách của trang sẽ phát hiện khi bạn "quá gần" đến cuối trang và yêu cầu máy chủ cung cấp thêm dữ liệu khi điều đó xảy ra.

Không cần quá kỹ thuật, họ sẽ không tải lại toàn bộ trang web. Thay vào đó, mã Javascript trên trang đó đang yêu cầu thêm dữ liệu từ máy chủ, sau đó khi nhận được dữ liệu mới, nó sẽ thêm dữ liệu đó vào trang hiện tại. Các phần của trang không cần thay đổi vẫn hoàn toàn không thay đổi.

Cách hiện đại nhất để thực hiện việc này là sử dụng các tính năng sửa đổi lịch sử HTML5 , dường như là những gì các trang web đó đang sử dụng.

— Ý kiến
nguồn

Mô tả của bạn thiếu một bước: nơi họ thực sự thay đổi lịch sử, cùng với việc thêm nhiều dữ liệu vào trang. Mà làm “cách hiện đại nhất làm bạn này ” loại vụng về, bởi vì này đề cập đến quá trình thay đổi lịch sử, mà không thực sự có được đề cập trong câu trả lời. (Về mặt ngữ pháp, điều này có nghĩa là để phần còn lại của trang không thay đổi hoặc có thể thêm dữ liệu vào trang, thường được thực hiện với AJAX và không thể được thực hiện với các tính năng sửa đổi lịch sử HTML5.)

— KRyan

Vì vậy, những gì về thay đổi URL, làm thế nào điều đó xảy ra mà không buộc tải lại? Bởi vì trên liên kết của bạn, nếu bạn tải lại một 'trang đã sửa đổi' (ví dụ /second), nó sẽ bị lỗi. Điều đó không xảy ra với trang tin tức của OP - họ thay đổi URL chính xác để bạn có thể chia sẻ nó.

— OJFord

@OllieFord đó là những gì các công cụ API lịch sử dành cho. history.pushStatevà history.replaceStatecho phép bạn thay đổi URL trong thanh địa chỉ mà không cần điều hướng khỏi trang hiện tại. Đó là sự thay thế hiện đại hơn của thủ thuật thay đổi đoạn URL cũ hơn ( #something), với một lợi thế lớn là API lịch sử cho phép bạn đẩy các URL "thực" mà máy chủ có thể tham gia tạo ra, trong khi điều đó phải được hỗ trợ hoàn toàn từ phía khách hàng

— hobbs

À được rồi. Nhưng như tôi đã nói, bản demo bị hỏng, thật khó hiểu.

— OJFord

Vì một số lý do, bản demo lịch sử mà tôi quen thuộc đã bị hỏng hoàn toàn khi câu hỏi này xuất hiện, vì vậy liên kết đó là liên kết đầu tiên tôi có thể thấy có vẻ như hoạt động. Hãy đề nghị một liên kết tốt hơn.

— Ixrec

Một chìa khóa lớn để hiểu những gì đang xảy ra: Có thể, thông qua Javascript, để đặt URL trong thanh địa chỉ mà không thực sự chuyển hướng người dùng. Để thấy điều này trong thực tế, dán mã dưới đây vào bảng điều khiển của trình duyệt được hỗ trợ. Lưu ý rằng nó thay đổi thanh địa chỉ của bạn thành http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

Lợi ích của phương pháp này là nếu người dùng đánh dấu sau khi cuộn đến một câu chuyện, dấu trang sẽ biết nơi gửi người dùng. Cuộn kết quả tìm kiếm vô hạn của DeviantArt là một ví dụ hay về hành vi này.

— Brian
nguồn

Đợi đã, DeviantArt đã thực hiện sửa đổi lịch sử trong kết quả tìm kiếm của nó, vì vậy bạn thực sự có thể liên kết đến / bookmark / nếu không thì ghi lại một trang cụ thể? Đó là ... một cái gì đó khá. Tuy nhiên, kết quả cụ thể sẽ tồn tại trên một trang cụ thể cho một truy vấn cụ thể trong bao lâu? Nếu bạn đánh dấu trang, tôi sẽ không thấy kết quả tương tự trên trang cụ thể đó vào ngày mai ... Tôi phải nhớ điều tra việc này.

— KRyan

@KRyan nó chỉ sửa đổi offsetparam mà bỏ qua một khoảng cách nhất định vào tập kết quả. Vì thứ tự sắp xếp mặc định dường như là "phổ biến mọi lúc", kết quả có thể hơi ổn định, nhưng chắc chắn là không nếu bạn chuyển thứ tự sắp xếp thành "mới nhất" và tìm kiếm thứ gì đó phổ biến.

— hobbs