javascript - 到达在 javascript 中动态设置的 URL

Question

我有一个非常简单的单页网站，有四个选项卡。单击选项卡将显示一个包含内容的 div，并隐藏所有其他三个 div 及其各自的内容。我还使用 javascript window.history.pushState 更改 URL，以便从 http://www.example.com 转到 http://www .example.com/Tab2Title。

显然，页面 http://www.example.com/Tab2Title 不存在，因此在更改 URL 后刷新页面时出现 404 错误。然后我意识到人们可能想要复制 URL 来发送、保存或进行其他操作。有没有办法根据URL加载tab2内容的页面？这样，当人们加载 URL 时，我可以显示正确的内容，而不是 404 页面。

Answer 1

是的，有办法。您可以将 Web 服务器配置为将所有选项卡 URL 重定向到同一页面。例如，访问 http://www.example.com/Tab2Title 会保持 URL 不变，但显示的内容与 http://www 中显示的内容相同.example.com/.

执行此重定向的确切代码取决于您使用的 Web 服务器。例如，如果您有一个使用 Apache 的静态网站、一个 PHP 网站或一个 Ruby on Rails 网站，情况就会有所不同。

在 JavaScript 方面，您应该向该单个页面添加一个“DOM 就绪”事件处理程序。该处理程序中的代码应查看 window.location 的值，提取针对每个选项卡更改的 URL 部分，并显示与其对应的选项卡。

<小时/>

如果您愿意更改现有的网址，有一个更易于实现的解决方案。不要链接到 http://www.example.com/Tab2Title，而是链接到 http://www.example.com/#Tab2Title。在 URL 中，像 #Tab2Title 这样的部分称为片段标识符，表示指向 # 之前的页面某一部分的链接，该部分会一次性加载。默认情况下，所有 Web 服务器都应将访问 http://www.example.com/#Tab2Title 视为与访问 http://www.example.com/ 相同，但除外当页面加载时，浏览器将查找带有 id="Tab2Title" 的元素，并滚动到它(如果存在)。正如我上面提到的，您仍然可以在 JavaScript 中使用 window.location 来更改页面内容，即使页面上不存在具有该 ID 的元素。