HTML5历史API和书签 [英] HTML5 History API and Bookmarking

问题描述

如果创建的网址不是真正的网址，那么使用历史记录API的重点是什么？当然我可以尽可能多地推送State，但是如果我不能将其中一个URL作为书签包含在某个地方，那有什么意义呢？我真正的问题是 - 如何设置Web服务器，以便无论输入的地址如何，它只加载一个Web应用程序（保留地址完整，以便我可以使用JavaScript引用它来加载相关内容）？

What's the point of using the History API if the URLs that it creates aren't "real" URLs? Sure I can pushState as much as I want, but if I can't then include one of these URLs as a bookmark somewhere, what's the point? My real question is -- how do you set up a web server so that, regardless of the address entered, it loads only one web application (leaving the address intact so that I can then reference it using JavaScript to load relevant content)?

因此，我可以使用History API显示相应的地址，然后当用户稍后返回网站时，该书签实际上可以正常工作。

So, I could then use the History API to display the appropriate address and then have that bookmark actually work when the user returns later to the site.

推荐答案

从历史API创建的URL没有什么假的。当访问者使用它们加载整个页面时（通过外部超链接或书签或什么不是），您只需要正确处理它们。您可以在客户端或服务器端执行此操作。

There's nothing fake about the URLs created from the history API. You simply need to handle them properly when visitors use them to load the entire page (via an external hyperlink or bookmark or what-not). You can either do this on the client side or the server side.

处理URL服务器端当然完全取决于您如何开发应用程序和这个问题有点超出了范围。

Handling the URLs server side will, of course, depend entirely on how you're developing your application and is a bit out of scope for this question.

但是，在客户端，您需要JavaScript解析URL，然后做出相应的响应。我个人觉得 jQuery Address 插件非常适合这个。

On the client side, however, you'd have JavaScript parse the URL and then respond accordingly. I personally find the jQuery Address plugin very good for this.

包含这样的插件，包括使用 state 参数的应用程序根目录的绝对路径：

Include the plugin like so, including an absolute path to the root of your application with the state argument:

< script type =text / javascriptsrc =jquery.address-1.3.min.js？state = / absolute / path / to / your / application> < / script>

然后你有 jQuery.address 解析页面加载并且DOM准备就绪时的URL：

Then you'd have jQuery.address parse the URL when the page loads and the DOM is ready:

// Handle the initial load and make the page look the way it's supposed to
$.address.init(function(e) {
    // Address and path details can be found in the event object.
    // Explore it a bit via console.log()
    console.log(e);
});

对于一个好的工作示例，我建议查看此 jQuery.address 示例以及 jQuery.address docs 。

For a good, working example I recommend viewing the source of this jQuery.address example as well as the jQuery.address docs.

这篇关于HTML5历史API和书签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！