标签: html5-history

Ember文档声明可以将其设置为使用History API进行路由而不是使用基于散列的片段:

App.Router.reopen({
  location: 'history'
});

但我没有提到如果浏览器不支持History API将会发生什么.它会回归到使用像History.js这样的哈希吗？

如果没有,我是否应该检查History API支持并将历史记录实现切换为哈希(如果不支持)？

我在history.state和popstate中有数组的状态和索引数组我读了数组的内容,它工作正常但是当我回到第一页并刷新数组时(不正常)但是前进历史国家仍然.

是否可以删除使用pushState创建的虚假历史记录？

我无法将我的状态存储在localStorage中,因为我的状态数组中有函数.

在使用HashLocationStrategy时, 我可以通过手动更改浏览器地址栏中的地址来更改路由,而无需重新加载页面.即从导航mysite/#/home到mysite/#/profile

但是,如果我使用PathLocationStrategy(它是默认位置策略),当我尝试做同样的事情时,我有不需要的页面重新加载.即从导航mysite/home到mysite/profile

有可能解决这个问题吗？

我正在使用Angular 2.0.0-beta17

我有一个URL /books，其中列出了一些书，还有一个URL模式/books/{some-book-title}，它显示了书的元数据的视图/更新形式。这是一个典型的用户案例，其中用户纠正了不正确的作者条目：

GET /books

  <a href="/books/ulysses">Ulysses</a>
  <a href="/books/don-quixote">Don Quixote</a>

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="Jamessss Joycessss">
  </form>

POST /books/ulysses FORMDATA author=James+Joyce

  Redirect 303 SEE OTHER location = /books/ulysses

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="James Joyce">
  </form>

问题在于历史记录堆栈现在

• /books
• /books/ulysses
• /books/ulysses

因此，当用户按下“后退”时，他们不会返回到/books，而只是刷新当前页面。是否有非JavaScript方法来处理更新案例，以便后退按钮具有预期的行为？如果没有，那么解决此问题的JavaScript方法是什么？

编辑：如果您多次发布，则更加令人困惑

GET /books
GET /books/ulysses    author=Jamesss Joycesss
POST author=3  ->  redirect shows author=3
POST author=2  ->  redirect shows author=2
POST author=1  ->  redirect shows author=1
Press back button …

在历史API使得它可以存储在浏览器历史上的一个状态对象.现在尝试这个演示(但它与其他任何其他行为相同,选择你最喜欢的:)):

1. 单击某些链接以构建一些历史记录
2. 清除浏览器历史记录(完整或仅适用于此网站)
3. 您仍然可以浏览历史

我希望清除历史会产生影响,但事实并非如此......
有人可以解释这种行为吗？

我正在尝试使用填充当前所选选项卡的索引

history.pushState({tabSelected: 1}, null, "");

我有一个jquery中popstate事件的处理程序,它以编程方式切换jquery ui选项卡.

 $(window).bind("popstate", function(event) {
                               var state = event.originalEvent.state;
                               ...
                            }

这工作正常,浏览器和我可以使用后退和前进按钮在选项卡之间切换.也适用于两层标签.

但在某些情况下,我想将其他状态推送到堆栈.所以我做了以下事情:

 var content = { targetId : id,
                  targetContent : $("#myDivId").html()
               };
 $.extend(content, {tabSelected: currentTab});
 history.pushState(content, null, "");

我把它推到历史之前和之后看起来都很好.检查console.log(history.state); 还尝试检查chrome控制台.

但是在我的popstate处理程序中,我没有在对象event.originalEvent.state上看到targetId,tabSelected属性.我在对象上看到tabSelected的正确值,但由于某种原因,我看到了一个削减状态.

检查Chrome和Firefox.无法获得正确的内容.什么想法可能是错的？提前致谢.

更新

还尝试在每个pushstate上递增一个全局变量并将其添加到状态.事实证明,对于特定情况,我提到全局变量变为值48而不是49意味着它正在拾取最后一个事件.我没有看到我的popstate处理程序被调用.不知道发生了什么.

另一个更新

当我调用history.pushState(content,null,"")两次时它可以正常工作.(只在一个地方,在另一个地方,我仍然称它为一次).看起来由于某种原因,浏览器返回的是最后一个状态.显然我的代码有问题,因为这个解决方法适用于chrome和firefox.

使用history.pushState,我们可以使用历史记录API更改当前网址.使用popstate功能,我们可以回到上一页.但回过头来,我发现浏览器"点击此处继续"中的前向链接按钮被禁用.现在,使用历史记录,我需要访问该按钮的属性.

我们如何使用历史记录API访问转发按钮的网址？

看来这一行在statechange事件中:

$('#content').load(State.data.home_page);

...导致同一页面加载多次,导致我的网站出现故障.我该怎么做才能解决这个问题？

(function($) {

    function loadHome() {
        $('#content').load(site.url + '/ #primary', function() {
            $(this).fadeIn(50);
        });
    }

    // User event
    $('.site-title a').on('click', function(e) {
        e.preventDefault();

        var newData = { home_page: site.url + '/ #primary' };
        History.pushState(newData, site.title, site.url);
        loadHome();
    });

    // History event
    History.Adapter.bind(window, 'statechange', function(){
        var State = History.getState();
        $('#content').load(State.data.home_page);
    });

})(jQuery);

更新

好的,所以我学到了.pushState实际的电话statechange.

所以基本上,我在想这就是发生的事情:

• 用户点击 .site-title a
• pushState()调用哪些调用statechange加载页面的一部分.
• 同时,loadHome()也称为加载相同的.

我可以看到这就是为什么我得到同一页面的多个实例.我以为statechange只有当用户点击浏览器上的后退按钮时才会调用.这样可以解决问题,但我仍然不知道如何向前推进.假设这是罪魁祸首,我不知道.load在这个statechange事件中用什么代替那条线.

webpack-dev-server 可以设置为将您发送回 index.html 并查找单个路由（例如http://localhost:4301/sdr）的脚本，但是当您放入更深的路由（或带有/ 最后）http://localhost:4301/sdr/dog它会感到困惑。

  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },

使用http://localhost:4301/sdr/dog服务器响应

x GET http://localhost:4301/sdr/bundle.js 

将 /sdr 添加到搜索 bundle.js 的路径中

我怎样才能解决这个问题。...然后我将在 NGINX 上尝试，然后使用react-router，然后使用navigo，然后使用react-router-redux....

我正在我的网站上构建一个文本编辑器,工作流程如下.

1. 在/list用户中,用户从列表中选择要编辑的条目/edit/[article_id].
2. 用户完成他们的工作,然后单击"提交".
3. 服务器处理该事物,并将它们重定向回到/edit/[article_id]现在反映编辑的工作.服务器还会激活页面上的Flash消息以指示编辑成功.

此时,用户可能想要返回/list并单击浏览器的"后退"按钮.这将根据他们提交的次数将其重复带回编辑器.

我已经尝试在页面的某处放置一个Back按钮,但很多用户只是忽略它.

我宁愿不通过AJAX发布提交,因为这也会影响flash消息系统.

我喜欢做的是,在用户提交时替换历史列表中的最后一个条目,而不更改其长度.可能吗？