Jak wczytać strony za pomocą JavaScript zamiast przekierować?

Question

Najlepszym przykładem tego, co próbuję zrobić, jest system nawigacji YouTube. Jeśli klikniesz link do filmu, pojawi się czerwony pasek u góry strony, wskazując, ile załadowanej strony zostało załadowanych. Po zakończeniu ładowania żądanej strony natychmiast zastępuje zawartość poprzedniej strony i rozpoczyna się ładowanie wideo. Robi się kilka rzeczy, aby uczynić to tak płynnym, jak to tylko możliwe.

• Adres URL został zmodyfikowany w celu dopasowania do nowej strony.
• Brak przekierowania (jest to trudne do wyjaśnienia).
• Nowa strona zostanie dodana do historii.
• Nawigacja wstecz i do przodu działa bezproblemowo.

I zmodyfikowane URL z:

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

próbowałem wczytać żądanej strony z:

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

byłoby zastąpić kod całej poprzedniej strony z nową stron kodowych. Kilka problemów z tym:

• Nawigacja w tył iw przód działa z URL, ale funkcja obsługi zdarzeń musi to wykryć i załadować odpowiednią stronę. Kiedyś to:

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

• Korzystanie $.load() nie może (nie powinien) załadować żadnych nowych skryptów tagi tagi skryptu ponieważ Synchronous XMLHttpRequest on the main thread is deprecated

Co chciałbym być w stanie to zrobić:

• Bezproblemowe ładowanie strony bez przekierowania za pomocą JQuery i AJAX
• Ta nowa strona może mieć nowy skrypt i znaczniki PHP (PHP może być niemożliwe, a może będę musiał użyć AJAX do replikacji tego).

Źródła:

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

Ten następujące stanowisko może pomóc.

Curious about the new way YouTube is loading pages

Można sprawdzić, czy biblioteki js nazywa history.js może pomóc osiągnąć to, czego potrzebujesz.

Answer 2

Biblioteka history.js wykonuje wszystkie ciężkie prace związane z historią i po prostu muszę się martwić o nawigację, co było łatwe. Wszystko, co muszę zrobić, to mieć wszystkie skrypty załadowane przy początkowym załadowaniu strony (kiedy użytkownik po raz pierwszy przychodzi na stronę).Następnie, gdy są "przekierowywane", treść strony jest zastępowana prawidłową stroną przy użyciu $("body").load("pageToBeLoaded.php",pageToBeLoaded()). Funkcja pageToBeLoaded() jest wywoływana po zakończeniu i obsługuje wszystkie fajne rzeczy dla nowej strony.