标签: html5-history

我有一个基本上有页眉,页脚和正文视图的Web应用程序.我正在使用history.js库和HTML5 pushstate来开发网站,但我遇到的一个问题是在javascript插入DOM时运行嵌入式javascript.

几乎我所有的javascript都包含在jQuery中(function(){...})(文档就绪加载器)

有谁知道处理这个问题的好策略？谢谢!

$(window).bind('statechange',function(){
     var State = History.getState(),
     url = State.url;
});

在以下函数中,url返回当前 URL.我正在寻找的是,该函数内,得到以前的网址,因此,例如,如果我在/cars/ferrari,去/cars/ford,url将返回cars/ford,但我想/cars/ferrari.

如何在statechange活动中获取以前的URL ？

我dataTable在页面上有一个对象,表示我需要跟踪的版本列表/releases我想要添加以下功能

1. if /releases?query=<query>,dataTable将使用提供的查询初始化
2. 该query如果用户改变搜索项参数进行更新
3. 浏览器中的后退和前进按钮将进行相应的查询

到目前为止,我能够完成前2个,但是当我监听popstate事件时,重新绘制表会触发一个pushState我无法弄清楚如何防止的事件.到目前为止,这是我的代码:

$(document).ready(function(){
  var prevSearch;
  var table = $('#releases').dataTable({
    "bJQueryUI" : true,
    "sPaginationType" : "full_numbers",
    "iDisplayLength" : 50,
    "oSearch": {"sSearch": '#{params[:query]}'},
    "fnDrawCallback": function(oSettings) {
        var curSearch = oSettings.oPreviousSearch.sSearch;
        if (!prevSearch) {
          prevSearch = curSearch;
        } else if (curSearch != prevSearch) {
          console.log("changed to: " + curSearch);
          history.pushState({query: curSearch}, "title", "releases?query=" + curSearch);
          prevSearch = curSearch;
        }
     }
  });
  window.addEventListener("popstate", function(e) {
    if (e.state) …

根据谷歌抓取,AJAX和HTML5 ,谷歌可以抓取使用历史API的动态网页,但它表示谷歌不会在页面上执行任何JavaScript.对我而言,这意味着不会制作ajax请求和dom构建,因此google将无法索引加载的页面内容.有人可以详细说明吗？

我在Facebook上观察到这个功能,当你在右下角打开一个聊天框,然后你去另一个页面,比如你的朋友的个人资料,或Facebook内的一些照片收集页面时,聊天框不会重新加载,它保持原样(就像在背景页面顶部的单独层中一样).

很自然地,我认为Facebook本身没有重新加载页面,它正在使用history.pushstate和相关的函数异步加载内容,并动态更改URL(Firebug确认了,如果你点击你朋友的一个名字并被采取到你朋友的个人资料页面,它实际上是一个GET被解雇的请求).因此,由于没有任何页面加载,聊天框可以只是闲置,就像它一样.

但是,在版本10之前pushstate不支持IE.但是,它也可以正常工作IE9.所以有人能告诉我他们是怎么做到的吗？他们是在使用historyAPI 还是使用不同的东西？

据我所知,History.js是HTML5历史/状态API的填充.因此,在现代浏览器中,它应该只使用popstate来监听URL更改.那么,为什么在最新的Chrome上我可以看到定时器每250ms发射一次？它看起来很浪费,并且每隔几秒触发一次垃圾收集器.

看看这个官方的History.js演示.

使用类似

history.pushState(null, document.title, "?#");

在我的网站上使我的网站图标在Firefox中消失，但在chrome中有效

页面加载时是否使用javascript / jQuery方式添加收藏夹图标？

在我的AngularJS应用程序中,我只需保存浏览器历史记录中的状态更改.这就是为什么当我更改$ location的参数时,我正在使用replace()方法.

例如,当我访问/ page1时,它将保存在历史记录中.使用replace()自动添加'center'参数,因此它不会添加新的历史记录条目:

$location.search('centre', hash).replace();

每次移动地图时,"中心"都会发生变化.

当我转到/ page2时,会创建历史记录中的新条目.当我移动地图时,"中心"会发生变化.

问题是,当我按下BACK按钮时,我将转到/ page1,但我需要保持'center'与之前相同,但它会更改为与/ page1的历史记录条目一起保存的内容.

我该如何解决这个问题？

我试着添加:

$window.history.replaceState({}, '', $location.absUrl());

我做replace()后,但没有工作.

我有以下设置App.vue:

<top-nav></top-nav>
<main>
    <router-view v-bind="{isOnline}"></router-view>
</main>

在top-nav我的js我有goBack方法:

methods: {
    goBack() {
        this.$router.go(-1);
    },
    ...
},

这适用于Chrome和Internet Explorer,但不适用于Safari.在该行上调试并设置断点时,.go(-1)它会遇到断点,一切看起来都很好(没有任何未定义).但是导航调用没有完成.

这不适用于移动设备或桌面设备.我以为Safari支持History API？

根据对此问题的公认答案，React Router 4不再匹配查询参数。如果我从与<Route>s 之一匹配的URL转到具有不同查询字符串的相同URL，则内容似乎没有变化。我相信这是因为在匹配相同的URL之间导航<Route>不会更改内容，但是如果我错了，请更正我。鉴于此，我该如何将React Router用于仅需要查询参数不同的一组URL？

例如，许多搜索引擎和其他使用搜索栏的网站（包括我正在使用的网站）都使用查询参数，通常为q或query。用户可以搜索一件事，然后确定不是他/她想要的东西，然后搜索另一件事。用户可以输入第二个URL或再次使用搜索栏搜索。URL路径中实际上没有搜索词的位置，因此需要在查询字符串中输入。我们如何处理这种情况？

使用React Router，有没有办法链接到仅在查询字符串中有所不同的URL并更改内容，而不刷新整个页面？最好，除了React和React Router外，不需要任何外部库。