标签: history.js

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

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

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

到目前为止,我已经阅读了很多关于react-router v4和npm历史库的内容,但似乎没有人帮助我.

我的代码按预期运行,直到它应该导航并在使用history.push()方法更改url时执行简单的重定向.URL正在更改为指定的路由,但不会在按钮上执行重定向.在此先感谢,仍在学习反应路由器......

我想按钮按钮在没有{forceRefresh:true}的情况下进行简单的重定向,然后重新加载整个页面.

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}

我已经在stackoverflow上阅读了关于history.js的所有帖子,包括,this,this和this以及查看源代码,但作为javascript/jquery的新手,我无法弄清楚如何实际实现html 5历史记录支持和回退以支持ie8/9等html4浏览器.我可以通过尽可能多地呈现一致的URL来体会用户体验带来的好处,如何解决深层链接并允许我想实现的书签,但是当我尝试在我的网站上实际使用它时,我有点迷失.

将history.js脚本添加到我的页面后

我承诺修改的代码是:

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); …

我对编程很新,我在jQuery的帮助下创建了一个AJAX站点.

我已经为AJAX历史处理程序了解了一下,并认为History.js似乎是最好的/最新的.

我的菜单按钮每个都有自己唯一的ID(#homeBtn,#featureBtn,#pricingBtn),目前看起来像这样:

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

关于如何实现History.js,有人能给我一个例子(最好是关于jsfiddle)吗？

我似乎无法掌握作者给出的任何例子,我只需要一个愚蠢的版本= b

如果您需要更多信息,请告诉我,谢谢!

为什么

$(function () {
  $(window).bind('popstate', function () {alert('pop');});

  window.history.pushState(null, '', '/foo');
});

不警惕pop？

注意:测试最新的chrome

-

据MDN称:

每次活动历史记录条目更改时,都会将popstate事件分派到窗口.如果正在激活的历史记录条目是通过调用pushState创建的或受对replaceState的调用影响而创建的,则popstate事件的state属性包含历史记录条目的状态对象的副本.

那么为什么我pushState不会触发这个popstate事件呢？

见 http://balupton.github.io/jquery-history/demo/

我被jquery.history.js所吸引

我发现的意思是

http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/

我认为第二个是基于JQuery.我的意思是它不需要任何额外的插件而不是jQuery.

jquery.history.js有什么特别之处？哈希变化？

我应该使用哪个来覆盖我的浏览器后退和前进按钮？

我正在尝试为我的ajax网站实现History.js,以便我可以使用前进和后退按钮甚至书签.然而,@ https://github.com/browserstate/History.js/这个例子让我对如何实现它感到困惑.有没有人有一个关于如何使用它的简单教程或示例.我们可以用来启动示例的示例是导航链接,例如

<script type="text/javascript">
window.onload = function() 
{
function1();
};

<ul>
<li><a href="javascript:function1()">Function1</a></li>
<li><a href="javascript:function2('param', 'param')"</a></li>
</ul>

我正在使用history.js来处理后退按钮.在history.js中,只要我执行pushstate,statechange就会触发.为什么？

我正在使用history.JS(最新)与Jquery(最新)加载和替换网站的一部分,这一切都在工作,目前我只是想让它在现代浏览器中工作,所以我不是在摆弄哈希变化.

一切似乎都有效,但是当我点击浏览器上的后退按钮(最新的FF和Chrome)时,页面不会改变(尽管网址和标题确实发生了变化).我有一个谷歌,看看这里,但我看不到发生了什么.

查看堆栈溢出我找到了这个页面:单击带有History.js的后退按钮时恢复内容似乎问了类似的问题.我已经将#left_col(这是被替换的div)的加载内容添加到状态数据中,但我不确定从那里开始,我知道我需要在状态发生变化时重新加载该数据,但我看不出怎么样.

var History = window.History; 
var origTitle = document.title;
if ( !History.enabled ) {
    return false;
}

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();     
    History.log(State.data, State.title, State.url);
});

$('.ajaxload').live("click", function() {
    History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
    $('#left_col').load($(this).attr("rel"));
    return false;
});

我真的很感激任何帮助!

更新:

我设法让用户点击返回更改页面,但它没有加载正确的状态(它似乎返回两个状态而不是一个),我在上面的代码中添加的代码是:

window.addEventListener('popstate', function(event) {
    var State = History.getState(); 
    $('#left_col').html(State.data.leftcol);
});

所以基本上我在使用历史库进行反应时遇到问题。

是否由于最新版本而导致我应尝试降级历史版本，但由于错误指出该Support for the latter will be removed in the next major release.如何更改以及应该在哪里更改？

它说：

Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.

和

Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.

我不太确定如何解决它。

import createHistory from './history'

import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { persistStore, persistReducer } from …