跨浏览器的jQuery AJAX历史window.history.pushState和回退 [英] Cross-browser jquery ajax history with window.history.pushState and fallback

问题描述

我想实现一个跨浏览器的方式使用jQuery和AJAX导航历史记录。我的方法是使用 window.history.pushState ，并回落到一个哈希网址 /＃！/网址在浏览器中不支持 window.history.pushState 。

例如：

 ＆LT; A HREF =/家＆GT;家＆LT; / A＆GT;
＆LT; A HREF =/关于＆gt;关于＆LT; / A＆GT;
＆LT; A HREF =/接触＆GT;联系＆LT; / A＆GT;
 

在支持 window.history.pushState 浏览器，点击这些链接之一应该不会刷新页面更改地址的 http://domain.com/home ， http://domain.com/about 等。当浏览器不支持 window.history.pushState ，它应该使用片段标识符，即：的 http://domain.com/#!/home ， http://domain.com/#!/关于。

---

更新：基于位置的反馈，我已经实现了阿贾克斯SEO （的git ）使用 jQuery的地址对HTML5的历史API的旧浏览器回退到 /＃！/网址。

解决方案

  //假设路径retreived并存储在变量路径

如果（typeof运算（window.history.pushState）=='功能'）{
    window.history.pushState（空，路径，路径）;
} 其他 {
    window.location.hash ='＃！' +路径;
}
 

I want to implement a navigation history using jQuery and AJAX in a cross-browser manner. My approach is to use window.history.pushState and fall back to a hash url /#!/url in browsers that do not support window.history.pushState.

For example:

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

On browsers that support window.history.pushState, clicking on one of these links should change address without page refresh to http://domain.com/home, http://domain.com/about etc. When the browser does not support window.history.pushState, it should use a fragment identifier, i.e: http://domain.com/#!/home, http://domain.com/#!/about.

---

Update: Based on the feedback here I have implemented Ajax SEO (git) that uses jQuery Address for HTML5 History API with old browser fallback to /#!/url.

解决方案

// Assuming the path is retreived and stored in a variable 'path'

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}

这篇关于跨浏览器的jQuery AJAX历史window.history.pushState和回退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！