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

Question

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

• 修改URL以匹配新页面.
• 没有重定向(这很难解释).
• 新页面将添加到历史记录中.
• Back and Forth导航无缝地工作.

我修改了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

Answer 1

下面的这篇文章可能会对您有所帮助。

对 YouTube 加载页面的新方式感到好奇

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