Question

我正在构建一个在非javascript后备（http://biologos.org/resources/find）之上使用AJAX和pushState / replaceState的工具。基本上，它是一个返回真实HTML链接列表的搜索工具（单击链接会将您从工具中删除）。

我正在使用onpopstate，因此用户可以浏览pushState创建的查询历史记录。当从真实链接（使用pushState创建的 NOT ，但通过实际的浏览器导航）导航回来时，此事件也会触发。我不希望它在这里开火。

所以这是我的问题：我如何区分来自onpopstate历史记录项目的pushState事件与来自真实导航的事件之间的区别？

我想做这样的事情：

window.onpopstate = function(event){
  if(event.realClick) return;

  // otherwise do something

}

我已经尝试了onpopstate handler - ajax back button，但没有运气:(

提前致谢！

修改这里的问题是不同浏览器处理onpopstate事件的方式。这是似乎正在发生的事情：

铬

在真实和虚拟事件中触发onpopstate
实际上重新运行javascript（因此设置loaded=false实际上会测试错误）
上述链接中的解决方案确实有效！

火狐

仅在虚拟事件

onpopstate

实际上重新运行javascript（因此设置loaded=false实际上会测试错误）
要使链接的解决方案真正发挥作用，需要在页面加载时将loaded设置为true，这会破坏Chrome！

Safari浏览器

在真实和虚拟事件中触发onpopstate
似乎 NOT 在事件发生之前重新运行javascript（如果先前设置为true，loaded将为true！）

希望我只是遗漏了一些东西......

Answer 1

您可以使用history.js。它应该为您提供一个在所有主要平台上表现一致的API（尽管它可能无法解决此特定问题;您必须尝试查找）。

但是，在我看来，处理此问题的最佳方法（以及其他相关问题）是以这些问题无关紧要的方式设计您的应用程序。自己跟踪应用程序的状态，而不是完全依赖于历史堆栈中的状态对象。

跟踪您的应用程序当前显示的页面。在变量中跟踪它 - 与window.location分开。当导航事件（包括popstate）到达时，将已知的current page与请求的next page进行比较。首先确定是否实际需要更改页面。如果是，则渲染请求的页面，并在必要时调用pushState（仅调用pushState进行“正常”导航 - 从不响应popstate事件）。

处理popstate的相同代码也应该处理您的正常导航。就您的应用而言，应该没有区别（除了普通导航包括对pushState的调用，而popstate驱动导航没有）。

以下是代码中的基本概念（请参阅实例at 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);

如果您查看example on jsBin，则会看到每次应用请求转换到新网页时都会调用_renderPage功能 - 无论是popstate （例如，后退/前进按钮），或者是由于调用goTo(page)（例如，某种用户动作）。它甚至在页面首次加载时调用。

_renderPage函数中的逻辑可以使用currentPage的值来确定“请求来自何处”。如果我们来自外部网站，则currentPage将为null，否则，它将包含当前可见网页的路径名。

如何区分'真实'和'虚拟'onpopstate事件

1 个答案: