使用HTML5历史记录API的好教程(Pushstate?)

2020/10/24 16:01 · javascript ·  · 0评论

我正在研究使用HTML5历史记录API解决与AJAX加载的内容的深层链接问题,但我正在努力下手。有谁知道任何好的资源吗?

我想使用此方法,因为这似乎是允许发送那些链接可能未打开JS的可能性的好方法。当使用JS的人向不使用JS的人发送链接时,许多解决方案都会失败。

我的初步研究似乎指向JS中的History API和pushState方法。

http://html5demos.com/history

对于出色的教程,您只需要有关此功能的Mozilla开发人员网络页面:https : //developer.mozilla.org/zh/DOM/Manipulating_the_browser_history

不幸的是,HTML5历史API在所有HTML5浏览器中的实现方式有所不同(使其不一致且有漏洞),并且没有HTML4浏览器的后备功能。幸运的是,History.js为HTML5浏览器提供了交叉兼容性(确保所有HTML5浏览器都能按预期运行),还可以选择为HTML4浏览器提供哈希回退(包括对数据,标题,pushState和replaceState功能的维护支持)。

您可以在此处阅读有关History.js的更多信息:https :
//github.com/browserstate/history.js

有关Hashbangs VS哈希VS HTML5历史API的文章,请参见此处:https :
//github.com/browserstate/history.js/wiki/Intelligent-State-Handling

我从“深入HTML 5”中受益匪浅。讲解和演示更简单明了。历史记录章节-http://diveintohtml5.info/history.html
和历史记录演示-http:
//diveintohtml5.info/examples/history/fer.html

使用HTML5 pushstate时请记住,如果用户复制或添加书签并加深链接,然后再次访问它,那将是直接服务器命中,它将显示404,因此您需要为此做好准备,即使pushstate js库也无济于事您。最简单的解决方案是向Nginx或Apache服务器添加重写规则,如下所示:

Apache(如果您使用的是vhost,则在您的vhost中):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx的

rewrite ^(.+)$ /index.html last;

HTML5规范的历史是古怪。

history.pushState()本身不会调度popstate事件或加载新页面。这只是为了将国家推入历史。这是单页应用程序的“撤消”功能。您必须手动调度popstate事件或使用history.go()导航到新状态。这个想法是路由器可以监听popstate事件并为您进行导航。

注意事项:

  • history.pushState()并且history.replaceState()不要调度popstate事件。
  • history.back()history.forward()以及浏览器的后退和前进按钮会调度popstate事件。
  • history.go()history.go(0)重新加载整个页面,并且不调度popstate事件。
  • history.go(-1)(后一页)和history.go(1)(前一页)进行调度popstate事件。

您可以像这样使用历史记录API推送新状态并调度popstate事件。


history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));

然后popstate使用路由器监听事件。

您可以尝试Davis.js,它可以在可用时使用pushState在JavaScript中进行路由,而无需JavaScript,它可以让服务器端代码处理请求。

这是railscasts的Ryan Bates撰写的有关该主题的精彩屏幕广播。最后,如果history.pushState方法不可用,他只是禁用ajax功能:

http://railscasts.com/episodes/246-ajax-history-state

您可能想看看这个jQuery插件。他们的网站上有很多示例。http://www.asual.com/jquery/address/

我在History.js之上编写了一个非常简单的路由器抽象,称为StateRouter.js它处于开发的早期阶段,但是我正在将其用作我正在编写的单页应用程序中的路由解决方案。像您一样,我发现History.js很难掌握,特别是因为我对JavaScript还是很陌生,直到我了解到您真的需要(或应该有)路由抽象,因为它可以解决底层问题。问题。

这个简单的示例代码应演示其用法:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

为了说明其用法,我精心制作了一些小提琴

如果有jQuery,则可以使用jQuery BBQ

本文地址:http://javascript.askforanswer.com/shiyonghtml5lishijiluapidehaojiaochengpushstate.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!