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

Question

我要做的最好例子是YouTube的导航系统。如果你点击一个视频链接，页面顶部会出现一个红色条形指示器，显示请求页面加载了多少。当请求页面加载完成后，它立即替换前一页的内容，视频开始加载。为了使这个过程尽可能无缝，有几个事情正在发生。

• 修改URL以匹配新页面。
• 没有重定向（这很难解释）。
• 新页面被添加到历史记录中。
• 前进和后退导航无缝运作。

我用以下方式修改了URL：

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

我尝试使用以下方式加载所请求的页面：

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

这将用新页面的代码替换整个先前页面的代码。这存在几个问题：

• Back and forth navigation works with the URL, but an event handler must detect this and load the proper page. I used this:

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

• Using $.load() can't(shouldn't) load any new scripts tags script tags because Synchronous XMLHttpRequest on the main thread is deprecated

我想要做的：

• 使用JQuery和AJAX无需重定向即可无缝加载页面
• 新页面能够有新的脚本和PHP标签（可能无法使用PHP，需要使用AJAX来复制此功能）。

来源：

更新地址栏以新URL而不使用哈希或重新加载页面

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

JS或jQuery浏览器后退按钮点击检测器

在主线程上同步XMLHttpRequest已被弃用

- Damen

---

欢迎来到SO - 你尝试过什么？我们很乐意帮助你，但不能为你编写代码。 - StudioTime

我在编码部分展示了我的尝试，但使用的方法已经过时且相当粗糙。我正在寻找一种类库，可以为我完成所有艰苦的工作。您可以在底部看到我的来源以及它们为什么不起作用。 - Damen

这可能与您的标签不符，但一个像AngularJS这样的前端MVC框架难道不能解决您的很多问题吗？（可能需要放弃PHP作为视图）。 - Drumbeg

只要不必放弃PHP，我很愿意使用AngularJS。我非常喜欢JQuery中的AJAX，因此更喜欢通过它来实现。 - Damen

关于进度条，我想回应一下@Emissary的评论。我使用了http://ricostacruz.com/nprogress/，它非常类似于YouTube。 - Drumbeg

Answer 1

以下内容可能对您有所帮助。

好奇YouTube新的页面加载方式

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

- kaygee

---

这真的有助于解释正在发生的事情。谢谢！ - Damen

Answer 2

history.js库处理历史记录的所有繁琐工作，我只需要担心导航，这很容易。我所需要做的就是在页面最初加载时（用户首次访问网站时）加载所有脚本。然后当他们被“重定向”时，使用$("body").load("pageToBeLoaded.php",pageToBeLoaded())替换页面主体为正确的页面。完成后调用pageToBeLoaded()函数，并处理新页面的所有有趣的事情。

- Damen