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

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

• 已修改URL以匹配新页面
• 没有重定向（这很难解释）
• 新页面将添加到"历史记录"中
• 前后导航无缝工作

我用修改了URL

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来复制它）

来源：

使用新URL更新地址栏，无需哈希或重新加载页面

使用jQuery 将HTML页面动态加载到div中

JS或Jquery浏览器返回按钮点击检测器

主线程上的同步XMLHttpRequest已弃用