标签: browser-history

因此,现在HTML5引入history.pushState了更改浏览器历史记录,网站开始将其与Ajax结合使用,而不是更改URL的片段标识符.

可悲的是,这意味着不再能够检测到这些呼叫了onhashchange.

我的问题是:是否有可靠的方法(黑客？;))来检测网站何时使用history.pushState？规范没有说明引发的事件(至少我找不到任何东西).
我尝试创建一个外观并替换window.history为我自己的JavaScript对象,但它根本没有任何效果.

进一步说明:我正在开发一个需要检测这些更改并相应操作的Firefox附加组件.
我知道几天前有一个类似的问题,询问听一些DOM事件是否有效但我宁愿不依赖它,因为这些事件可能由于很多不同的原因而产生.

更新:

这是一个jsfiddle(使用Firefox 4或Chrome 8),显示调用onpopstate时不会触发pushState(或者我做错了什么？随意改进它!).

更新2:

另一个(侧面)问题是window.location在使用时没有更新pushState(但我已经在这里读到了这个,我认为).

我要求最终用户在注销/注销后不能返回受限页面.但目前最终用户可以通过浏览器后退按钮,访问浏览器历史记录或甚至通过在浏览器的地址栏中重新输入URL来实现.

基本上,我希望最终用户在注销后不能以任何方式访问受限制的页面.我怎样才能做到最好？我可以用JavaScript禁用后退按钮吗？

恐怕这可能是不可能的,但有没有办法改变一个URL的哈希值不留在浏览器的历史记录中的条目并没有重装？或者做同等的？

至于具体细节,我正在开发一些基本的哈希导航:

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs …

我正在为我的网络应用程序使用History API,但有一个问题.我执行Ajax调用以更新页面上的一些结果并使用history.pushState()来更新浏览器的位置栏而不重新加载页面.然后,当然,我使用window.popstate来恢复单击后退按钮时的先前状态.

问题是众所周知的 - Chrome和Firefox以不同的方式对待popstate事件.虽然Firefox没有在第一次加载时启动它,但Chrome确实如此.我想拥有Firefox风格并且不会在加载时触发事件,因为它只是在加载时使用完全相同的结果更新结果.除了使用History.js之外是否有解决方法？我不想使用它的原因是 - 它本身需要太多的JS库,因为我需要在已经有太多JS的CMS中实现它,我想最小化JS我放入它.

所以,想知道是否有办法让Chrome不加载'popstate'加载,或者有人试图使用History.js,因为所有库一起混合成一个文件.

当popstate事件发生时,是否可以阻止滚动文档的默认行为？

我们的网站使用jQuery动画滚动和History.js,状态更改应该将用户滚动到页面的不同区域,无论是通过pushstate还是popstate.问题是浏览器在发生popstate事件时自动恢复先前状态的滚动位置.

我已经尝试使用容器元素设置为文档的100%宽度和高度,并滚动该容器内的内容.我发现的问题是它似乎没有滚动文档那么顺畅; 特别是如果使用大量的css3,如盒阴影和渐变.

我还尝试在用户启动的滚动期间存储文档的滚动位置,并在浏览器滚动页面后(在popstate上)恢复它.这在Firefox 12中运行良好,但在Chrome 19中,由于页面正在滚动和恢复,因此存在闪烁.我假设这与滚动和被触发的滚动事件之间的延迟有关(滚动位置被恢复的地方).

Firefox在popstate触发之前滚动页面(并触发滚动事件),Chrome首先触发popstate然后滚动文档.

我见过的所有使用历史API的网站都使用与上述类似的解决方案,或者只是在用户返回/转发时忽略滚动位置更改(例如GitHub).

是否可以阻止文档在popstate事件中滚动？

我有一个AJAX应用程序.用户单击按钮,页面的显示会发生变化.他们点击后退按钮,期望进入原始状态,但是,他们会在浏览器中转到上一页.

如何拦截和重新分配后退按钮事件？我已经研究过像RSH这样的库(我无法工作......),我听说使用散列标签会有所帮助,但我无法理解它.

我正在开发一个网页,根据我执行相应动画的下一步或后退动作,使用pushstate时会出现问题.当我收到活动时,如何知道用户是否使用Pushstate API点击了后退或转发历史记录按钮？或者我是否必须自己实施某些内容？

这是导致我麻烦的文件:

var Routers = React.createClass({

  getInitialState: function(){
    return{
      userName: "",
      relatives: []
    }
  },

  userLoggedIn: function(userName, relatives){
    this.setState({
      userName: userName,
      relatives: relatives,
    })
  },

  render: function() {
    return (
      <Router history={browserHistory}>
        <Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
        <Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
      </Router>
    );
  }
});

我试图将新的this.state.relatives和this.state.userName通过路线传递到我的"feed"组件.但我收到此错误消息:

警告:[react-router]你无法改变; 它会被忽略

我知道为什么会发生这种情况,但不知道我应该如何将状态传递给我的"feed"组件.在过去的5个小时里我一直在努力解决这个问题,而且我已经非常绝望了!

请帮忙!谢谢

解:

下面的答案很有帮助,我感谢他们,但他们并不是最简单的方法.在我的情况下做到这一点的最好方法是:当您更改路线时,您只需将消息附加到它,如下所示:

browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});

或者如果你通过链接这样做:

<Link 
    to={{ 
    pathname: '/pathname', 
    state: { message: 'hello, im a passed message!' } 
  }}/>

来源: …

这太棒了,我经常看到这个在其他网站上工作但从未在我正在工作的网站上工作.

我用ajax引入了新内容,我知道history.js和History API,我不想更改URL,只是让浏览器缓存新的HTML内容,这样当用户离开页面并返回使用时后退按钮,它仍然有更新的HTML.

我看到这在其他站点中一直有效,没有更改URL或使用#井号.
是否有一个技巧让它工作或是由浏览器随机决定？
如果我不想使用URL来获取此信息,是否有一个简单的替代方案？

使用html5 window.historyAPI,我可以在我的网络应用程序上很好地控制导航.

该应用程序目前有两种状态:selectDate(1)和enterDetails(2).

当应用程序加载时,我replaceState并设置一个popState监听器:

history.replaceState({stage:"selectDate",...},...);
window.onpopstate = function(event) {
    that.toStage(event.state.stage);
};

选择日期并且应用程序移至第2阶段时,我将状态2推入堆栈:

history.pushState({stage:"enterDetails",...},...);

只要细节发生变化,就会替换此状态,以便将它们保存在历史记录中.

离开第二阶段有三种方法:

• 保存(ajax提交)
• 取消
• 返回键

后退按钮由popstate监听器处理.取消按钮按下阶段1,以便用户可以返回他们进入后退按钮的详细信息.这两个都很好.

保存按钮应恢复到第1阶段,不允许用户导航回详细信息页面(因为他们已经提交).基本上,它应该使历史堆栈长度= 1.

但似乎没有history.delete(),或history.merge().我能做的最好的事情是history.replaceState(stage1)将历史堆栈留作:["selectDate","selectDate"].

如何摆脱一层？

编辑:

想到别的东西,但它也不起作用.

history.back(); //moves history to the correct position
location.href = "#foo"; // successfully removes ability to go 'forward', 
                       // but also adds another layer to the history stack

这使历史堆栈成为["selectDate","selectDate#foo"].

那么,作为一种替代方案,有没有办法在不推动新状态的情况下消除"前进"历史？