Làm cách nào để tải các trang có JavaScript thay vì chuyển hướng?

Question

Ví dụ tốt nhất về những gì tôi đang cố gắng làm là hệ thống điều hướng của YouTube. Nếu bạn nhấp vào liên kết tới video, thanh màu đỏ ở đầu trang sẽ hiển thị cho biết số lượng trang được yêu cầu đã tải. Khi trang được yêu cầu tải xong, ngay lập tức sẽ thay thế nội dung của trang trước đó và video bắt đầu tải. Một số điều đang xảy ra để làm cho điều này liền mạch nhất có thể.

• URL được sửa đổi để khớp với trang mới.
• Không có chuyển hướng (Điều này rất khó giải thích).
• Trang mới được thêm vào Lịch sử.
• Điều hướng quay lại và Forth hoạt động liền mạch.

tôi sửa đổi URL với:

window.history.pushState("object or string", "Title", "/new-url"); 

Tôi đã cố gắng để tải trang bạn yêu cầu với:

$.("html").load("newPage.php", function(){}); 

này sẽ thay thế mã toàn bộ trang trước với mã trang mới. Một số vấn đề với điều này:

• Điều hướng quay lại hoạt động với URL, nhưng trình xử lý sự kiện phải phát hiện và tải trang thích hợp. Tôi sử dụng này:

  $(window).on('popstate', function() { 
      $('html').load("../"+window.location.pathname, {page:"account"}); 
  }); 
  

• Sử dụng $.load() không thể (không nên) tải bất kỳ kịch bản mới thẻ thẻ script vì Synchronous XMLHttpRequest on the main thread is deprecated

Những gì tôi muốn để có thể làm:

• Liền mạch tải trang không có chuyển hướng bằng cách sử dụng JQuery và AJAX
• Để trang mới có thể có tập lệnh mới và thẻ PHP (PHP có thể là không thể và tôi có thể phải sử dụng AJAX để nhân rộng điều này).

Nguồn:

Updating address bar with new URL without hash or reloading the page

Load HTML page dynamically into div with jQuery

JS or Jquery browser back button click detector

Synchronous XMLHttpRequest on the main thread is deprecated

Answer 1

bài sau này có thể giúp bạn.

Curious about the new way YouTube is loading pages

Bạn có thể kiểm tra xem một thư viện js gọi history.js có thể giúp bạn đạt được những gì bạn cần.

Answer 2

Thư viện history.js thực hiện tất cả công việc khó khăn trong việc xử lý lịch sử và tôi chỉ phải lo lắng về điều hướng, điều này thật dễ dàng. Tất cả những gì tôi cần làm là có tất cả các tập lệnh được tải trên tải ban đầu của trang (khi người dùng lần đầu tiên đến trang web).Sau đó, khi chúng được "chuyển hướng", nội dung trang được thay thế bằng trang chính xác bằng cách sử dụng $("body").load("pageToBeLoaded.php",pageToBeLoaded()). Chức năng pageToBeLoaded() được gọi khi hoàn thành và nó xử lý tất cả nội dung thú vị cho trang mới.