在 HTML5 History API 中使用虚假 URL答案

【问题标题】：Using false URLs with HTML5 History API在 HTML5 History API 中使用虚假 URL
【发布时间】：2011-07-12 23:54:18
【问题描述】：

我正在开发一个网站，该网站有一个基本滑块，其中有 4 张幻灯片，左右移动，仅显示 1 张幻灯片在页面中心。所有幻灯片的内容都加载在一个页面上，每个页面都在它自己的 div 中。

<div id="slider-box">
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
</div>

没什么特别的。此外，每张幻灯片都与一个链接相关联：

<a href="/gallery">Gallery</a>
<a href="/links">Links</a>
<a href="/about">About</a>
<a href="/resources">Resources</a>

所以我开始使用 History.js 将每张幻灯片与其各自的链接联系起来； www.example.com/about。我可以毫无问题地改变状态；前后工作和 URL 更改。

我碰巧注意到的是，如果我使用虚假 URL（例如 www.example.com/about）加载页面，页面会返回 404。

我可以做些什么来防止 404 发生，同时确保页面被带到正确的幻灯片？

我还有其他方法吗？

我在一个带有 jQuery 和 HTML5 的 LAMP 堆栈中。

我真的坚持这个...谢谢！

【问题讨论】：

标签： html browser-history pushstate

【解决方案1】：

如果我对您的理解正确，您实际上必须创建/about、/gallery 等页面。想一想——History API 只能在一个页面中工作。它会操纵地址栏的内容，但不会自行创建实际的 URL。

我的解决方案是使用 mod_rewrite 之类的东西。 /about 会重定向到 /?p=about 之类的东西，这会加载您的页面，而相应的 div 已经打开。其他幻灯片也一样。只有这样您才能使用 History API 的功能。

【讨论】：

【解决方案2】：

它是我们处理 HTTP 404 错误的 Web 服务器，请参阅您的 Web 服务器文档以了解如何使用重定向等创建自定义错误页面。如果您使用的是 Microsoft Internet Information Server 7，请查看此处http://blogs.iis.net/rakkimk/archive/2008/10/03/iis7-enabling-custom-error-pages.aspx

【讨论】：