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

Question

我尝试做的最好的例子是 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() 不能(不应该)加载任何新的脚本标签脚本标签，因为 主线程上的同步 XMLHttpRequest 已弃用

我希望能够做什么:

• 使用 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

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

Curious about the new way YouTube is loading pages

您可以检查是否有一个名为history.js 的js 库可以帮助您实现所需。