如何使用JavaScript加载页面而不是重定向？

Question

我尝试做的最好的例子是YouTube的导航系统。如果单击指向视频的链接，则会在页面顶部显示一个红色条，指示已加载所请求页面的数量。当请求的页面加载完成后，它会立即替换上一页的内容，并开始加载视频。有几件事情正在发生，以使其尽可能无缝。

• 修改网址以匹配新网页。
• 没有重定向（这很难解释）。
• 新页面已添加到历史记录中。
• Back and Forth导航无缝地工作。

我用以下内容修改了网址：

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

我尝试使用以下内容加载请求的页面：

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

这将用新页面代码替换整个上一页的代码。有几个问题：

• 来回导航与URL一起使用，但事件处理程序必须检测到这一点并加载正确的页面。我用过这个：

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

• 使用$.load()无法（不应该）加载任何新脚本标记脚本标记，因为Synchronous XMLHttpRequest on the main thread is deprecated

我希望能够做到的事情：

• 使用JQuery和AJAX
无需重定向无缝加载页面
• 让新页面能够拥有新的脚本和PHP标记（PHP可能是不可能的，我可能必须使用AJAX来复制它）。

来源：

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

以下帖子可能对您有帮助。

documentation for the PrintStream.println(Object)

您可以检查名为Curious about the new way YouTube is loading pages的js库是否可以帮助您实现所需。

Answer 2

history.js库完成了处理历史的所有艰苦工作，我只需要担心导航，这很容易。我需要做的就是在页面的初始加载时加载所有脚本（当用户第一次访问该站点时）。然后，当它们被“重定向”时，使用$("body").load("pageToBeLoaded.php",pageToBeLoaded())将页面正文替换为正确的页面。 pageToBeLoaded()函数在完成时调用，它处理新页面的所有有趣内容。