我正在运行一个简单的：

window.location.hash = "hash";

在页面加载后立即在 url 中添加哈希值。我明白了，mySite.com/aPage#hash。当我单击后退按钮时，我希望 url 更改回 mySite.com/aPage，而无需任何实际加载/返回。相反，我被带回到 mySite.com/aPage 之前的历史记录条目。

当我在用户触发的点击事件回调中调用 window.location.hash 时，它效果很好。

我创建了一个测试：http://jsbin.com/idukiz/1/ 查看代码：http://jsbin.com/idukiz/1/edit

只有 setTimeout 函数中添加的最后一个哈希的行为符合我的预期。有什么想法如何让它在没有 setTimeout 的情况下工作吗？

是否可以在主要浏览器（Google Chrome、Internet Explorer、Firefox、Safari 等）中持续同步浏览器历史记录。我在网上寻找插件或想法，但一无所获。我知道所有浏览器都有某种数据库来存储访问过的链接，如果我在 Firefox 中如何以某种方式同步所有我仍然能够看到 Internet Explorer 历史记录？

当我访问 JavaScript 变量时，window.history.length我会返回窗口历史记录的大小。当我从一页向前导航到另一页，然后再导航到另一页时，长度会window.history增加。当我使用浏览器后退按钮返回历史记录时，window.history即使我返回历史记录， 的值也不会减少。为什么是这样？

我正在尝试使浏览器历史记录（后退/前进按钮）适用于我的 Ruby on Rails 站点。我遵循以下 rails cast 剧集：http : //railscasts.com/episodes/246-ajax-history-state

我能够转换所有 AJAX 链接，但是我遇到了远程表单的问题。

这是我的尝试：

edit.html.erb：

<%= simple_form_for(@post,
                    url: post_path(@post.id),
                    remote: true) do |f| %>
  <%= f.input(:comments) %>
  <div class="browser-history-mgmt" 
    <%= f.button(:submit,
                 value: "Save") %>
  </div>
<% end %>

应用程序.js：

$(function () {
  $('.browser-history-mgmt input').unbind('click').bind('click', function () {
    var action = this.form.getAttribute("action");
    history.pushState(null, '', action);
    //TODO: call getScript and return false instead of true
    return true;
  });

  $(window).bind("popstate", function () {
    $.getScript(location.href);
  });
})

这几乎有效，但如果我尝试在没有所需注释的情况下保存，地址栏会更新为“显示”地址，而我仍停留在“编辑”表单上。（我相信实施 TODO 会解决这个问题……但我不知道如何实施。）

我什至不确定我是否在这里走正确的道路。铁路广播剧集现在已经快 5 年了。有没有一种简单的方法可以让浏览器历史记录在 …

从“页面 A”，我可以打开“页面 B”的新选项卡（当前的“旧”选项卡然后导航到此处不特别相关的另一个页面）。但我需要新选项卡在其历史记录中包含“页面 A”，以便按浏览器的后退按钮返回到该页面 - 不幸的是我无法做到这一点。

这是我正在尝试的：

var pageA = window.location.href;
var newTab = window.open("about:blank");
    window.setTimeout(function(){
        newTab.location.href = url;
        newTab.history.replaceState({fromBackClick: true}, "page1", pageA);
        newTab.history.pushState({fromBackClick: true}, "page2", url);
        newTab.setTimeout(function() {
            newTab.onpopstate = function () {
                //newTab.location.href = pageA; /* alternative to next line */
                newTab.location.reload(true);
                return true;
            };
        }, 100);
        window.location.href = new_url;
    }, 100);

请注意，url和new_url是传递给该代码所属函数的参数。

发生的情况是，新选项卡可以正常打开，其中包含“页面 B”的内容，并且当您单击“返回”时，“页面 A”url 会出现在地址栏中。不幸的是，尽管明显的 URL 发生了变化，但浏览器实际上并没有导航回实际的“Page A”页面。由于某种原因onpopstate，回调永远不会触发（即使我注释掉当前选项卡的 href 更改）。

有谁知道如何让回击实际上返回到地址栏中的 URL？

编辑

我知道这是可能的，因为如果您在选中某些合作伙伴复选框的情况下进行搜索，Kayak.com 会在 Chrome 中执行此操作。

我从不喜欢post-redirect-get模式，因为它需要在客户端和服务器之间进行额外的往返，它通常需要使用有状态和（在我看来）hacky flash 模式，而且，尽管主要原因之一是used 是为了防止重复提交表单，它实际上并没有很好地完成这项工作，因为在重定向完成之前，窗口中仍然可能出现重复提交。（这可以通过在客户端采取预防措施来防止，但这些预防措施使得 post-redirect-get 变得不必要，除非浏览器关闭 JavaScript 的情况极为罕见。）

然而，使用该模式的一个令人信服的理由是，人们通常希望客户端看到的 URL 与发布后的 URL 不同。我最近尝试删除 post/redirect/get 模式并仅history.replaceState用于在客户端上设置所需的 URL。我知道这不适用于 IE9 及更低版本，但我对此表示同意。但是，我忽略了这种方法是否存在其他一些重大问题？

问题

/page.html#A给定从到 的导航/page.html#B，有没有办法区分用户：

1. 单击浏览器的“后退”按钮，然后
2. 手动将 url 更改回/page.html#A?

背景/背景

我正在构建一个网络应用程序，其中单个页面在多个内容幻灯片之间进行转换，每个内容都由特定位置哈希标识，例如'#A', '#B'。

例如，当用户位于幻灯片“A”上并选择选项“B”时，位置将从 更改/page.html#A为/page.html#B。

转换后，location.hash==#B、 和back()（通过 JS 或浏览器按钮）将使用户返回到location.hash==#A。

但是，没有什么可以阻止用户手动更改 URL 栏中的哈希值。在这种情况下，浏览器会认为这是向前导航，插入/page.html#B后退历史记录。也就是说，导航历史记录将是#A>> #B，#A并且单击返回现在会将用户带到#B。

我需要区分这两种情况，以便当我知道用户已手动更新 url 哈希时，我可以触发go(N)同步浏览器后退/下一个状态。

迄今为止的尝试

1）HTML5popstate事件：
我曾希望html5 popstate事件（https://developer.mozilla.org/en-US/docs/Web/Events/popstate）只会在case#1中被触发，但我可以确认它在这两种情况下都会发生火灾。

2）浏览器.onhashchange事件
我可以确认，如果存在，该事件在两种情况下都会被触发

hashChange() 3）我可以确认jQuery mobile在这两种情况下都会被触发

4）读取浏览器导航历史记录
我的下一个想法是维护一个哈希历史记录的JS数组，并比较新的哈希值和浏览器历史记录是否与JS数组匹配，但是出于安全原因JS无法读取浏览器位置历史记录。

想法

我知道如果我调用 window.history.forward()，并且不存在页面，则不会发生任何事情。我正在考虑哈希历史记录的JS数组，调用forward()，检查新的location.hash（现在安全性允许），与JS数组进行比较，然后调用go(N)来同步浏览器后退/下一个状态。但有点乱。

我使用 react 构建我的项目，当我想更改 URL 时，我发现 browserHistory.push(myUrl) 和 location.replace() 都有效。所以我想知道他们之间有什么不同。

divClick() {
    location.replace('/doctor/task');
    // browserHistory.push('/doctor/task');
}
render() {
    return (
        <div>
            <div onClick={this.divClick.bind(this)}>Change</div>
        </div>
    );
}

我有一个应用程序，您可以通过各种方式（搜索、按类别向下钻取等）访问相册列表。从相册中，您单击打开单张照片并使用左/右箭头以及各种编辑工具遍历它们。每个迭代/工具操作都会执行 history.push() 以将路由添加到路由器历史记录中。我正在尝试实现一个按钮，在您开始查看单张照片之前，该按钮将返回到历史记录中的确切位置。为此，我想将历史堆栈向后移动到历史与多个模式中的 1 个匹配的点，然后执行 history.go(-14)（或其他）以跳回开始整个过程​​的路线链。

我一直在搜索 React 路由器代码以及 HTML5 History 对象，但没有看到任何直接访问历史堆栈的方法，因此我可以将其返回。我宁愿不依赖于让每个单独的照片动作将它们的路径推到一个单独的地方，因为这使它变得脆弱（每个照片动作都是由不同的开发人员构建的，并且将来添加新动作将需要以前的知识来记住这样做）。

我无法进入硬编码路径，因为它会被推到历史堆栈的顶部，而点击后退箭头只会将您返回到最后一个单独的照片页面，而不是首先生成相册列表的搜索页面.

关于访问历史堆栈的任何建议？

我正在使用此重定向用户：

history.push({
  pathname: `${pathname}/order`,
  search: qs.stringify({
    id,
    group,
  }),
})

在当前页面中，路径名是/app/clients/group/active，这是我从location.

现在，我想将用户重定向到/data：

history.push({
  pathname: `${pathname}/data`,
  search: qs.stringify({
    id,
    group,
  }),
})

但是，pathnamehas /active，在重定向到/data路由时不需要。

当用户在该页面上时，如何从路径名中删除它。