您也许可以使用history.js。它应该为您提供一个在所有主要平台上都表现一致的 API(尽管它可能无法解决这个特定问题;您必须尝试找出答案)。
但是,在我看来,处理这个(以及其他相关问题)的最佳方法是设计您的应用程序,使这些问题无关紧要。自己跟踪应用程序的状态,而不是完全依赖历史堆栈中的状态对象。
跟踪您的应用程序当前显示的页面。在一个变量中跟踪它——与window.location
. 当导航事件(包括 popstate)到达时,将您的 knowncurrent page
与请求的next page
. 首先确定是否确实需要更改页面。如果是这样,则呈现请求的页面,并在必要时调用 pushState(仅调用 pushState 进行“正常”导航——从不响应 popstate 事件)。
处理 popstate 的相同代码也应该处理您的正常导航。就您的应用程序而言,应该没有区别(除了普通导航包含对 pushState 的调用,而 popstate 驱动的导航则不包含)。
这是代码中的基本思想(参见jsBin的实时示例)
// keep track of the current page.
var currentPage = null;
// This function will be called every time a navigation
// is requested, whether the navigation request is due to
// back/forward button, or whether it comes from calling
// the `goTo` function in response to a user's click...
// either way, this function will be called.
//
// The argument `pathToShow` will indicate the pathname of
// the page that is being requested. The var `currentPage`
// will contain the pathname of the currently visible page.
// `currentPage` will be `null` if we're coming in from
// some other site.
//
// Don't call `_renderPage(path)` directly. Instead call
// `goTo(path)` (eg. in response to the user clicking a link
// in your app).
//
function _renderPage(pathToShow) {
if (currentPage === pathToShow) {
// if we're already on the proper page, then do nothing.
// return false to indicate that no actual navigation
// happened.
//
return false;
}
// ...
// your data fetching and page-rendering
// logic goes here
// ...
console.log("renderPage");
console.log(" prev page : " + currentPage);
console.log(" next page : " + pathToShow);
// be sure to update `currentPage`
currentPage = pathToShow;
// return true to indicate that a real navigation
// happened, and should be stored in history stack
// (eg. via pushState - see `function goTo()` below).
return true;
}
// listen for popstate events, so we can handle
// fwd/back buttons...
//
window.addEventListener('popstate', function(evt) {
// ask the app to show the requested page
// this will be a no-op if we're already on the
// proper page.
_renderPage(window.location.pathname);
});
// call this function directly whenever you want to perform
// a navigation (eg. when the user clicks a link or button).
//
function goTo(path) {
// turn `path` into an absolute path, so it will compare
// with `window.location.pathname`. (you probably want
// something a bit more robust here... but this is just
// an example).
//
var basePath, absPath;
if (path[0] === '/') {
absPath = path;
} else {
basePath = window.location.pathname.split('/');
basePath.pop();
basePath = basePath.join('/');
absPath = basePath + '/' + path;
}
// now show that page, and push it onto the history stack.
var changedPages = _renderPage(absPath);
if (changedPages) {
// if renderPage says that a navigation happened, then
// store it on the history stack, so the back/fwd buttons
// will work.
history.pushState({}, document.title, absPath);
}
}
// whenever the javascript is executed (or "re-executed"),
// just render whatever page is indicated in the browser's
// address-bar at this time.
//
_renderPage(window.location.pathname);
如果您查看jsBin 上的示例,您会看到_renderPage
每次应用程序请求转换到新页面时都会调用该函数——无论是由于popstate
(例如后退/前进按钮),还是由于调用goTo(page)
(例如,某种用户操作)。它甚至在页面第一次加载时被调用。
您的逻辑,在_renderPage
函数中可以使用值currentPage
来确定“请求来自哪里”。如果我们来自外部站点,则为 ,否则,currentPage
它将null
包含当前可见页面的路径名。