标签: pushstate

有没有办法pushState在IE9中使用HTML5 History API()？如果所有其他浏览器都有一个很棒的解决方案!

我在JS响应中使用这种类型的行

if (history && history.pushState){
     history.pushState(null, null, '<%=j home_path %>');
}

但是当我back在浏览器中单击时,我会看到响应的JS代码而不是上一页.

有没有办法使后退按钮工作,所以它会重新请求最后一个网址的页面(之前home_path作为pushStated？

更新:

我发现了这个 ..似乎其他人也有同样的问题.. History.js也没有解决它

所以要确认那里的一些评论..这只发生在chrome中

我的想法

我认为所有这些的根源是popstate请求相同类型的pushstate文档(js响应).需要做的是在popstate请求html响应..我只是不知道如何

更多更新:

看到http://railscasts.com/episodes/246-ajax-history-state它提到使用

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

这解决了问题,但根据理解jQuery $ .getScript()与 ajax缓存它将添加时间戳..污染网址..关闭它使它不再工作具有相同的效果..

谁知道如何解决这个问题？

更多更新

我在整个interweb中跟踪了问题的踪迹,并以chrome中的一个问题结束,这个问题指向rails问题(然而firefox正常工作)和rails-ujs中的问题,不包括响应中的Vary Header

示例可以在这里找到

我正在学习HTML5中的历史,在这个例子中(打开JavaScript浏览器控制台以查看错误)event.state.url返回:

Uncaught TypeError: Cannot read property 'url' of undefined

看看和帮助:http://jsfiddle.net/un4Xk/

我正在创建的一个小网站(更像是摆弄)使用AJAX加载每个页面.以前我正在更改网址的哈希,这很好但很难看,用户可以刷新页面,它会保留在同一页面上.

现在我已经切换到在JS History API中使用pushState,它看起来好多了,后面和前面的工作,但刷新没有.例如:

转到:http://example.com/page2转到404,因为没有真正的页面称为第2页.但是,如果我单击使用pushState方法更改URL的按钮,它将按预期工作.

如何允许刷新,并使用新的History API永久链接？

(以及搜索引擎如何对待这一点,因为谷歌不得不创建一种索引哈希网址的方法,通过让开发人员切换到#!,有可能他们将来会为历史api做类似的事情吗？)

我正在尝试nginx使用我在Javascript应用程序中为我管理的pushState基于URI的URI处理backbone.js.

现在正在访问一个级别的URI,例如.example.com/users效果很好,但不是两级或更深的URI,例如Backbone文档中example.com/users/all提到的:

例如,如果您的路径为/ documents/100,则如果浏览器直接访问该网址,您的网络服务器必须能够提供该网页

因此,我不太了解nginx的重写选项,我仍然确定我可以做一些事情,比如rewrite ^ /index.html;将所有内容重定向到我的内容index.html,但是丢失了存储在我需要的同一台服务器上的任何最终静态文件(图像,javascript和css)能够访问.

那么我应该怎样做以下所示的当前配置,以使其工作？

server {
    listen   80;
    server_name  example.com;

    location / {
        root   /var/www/example.com;
        try_files $uri /index.html;
    }

}

我正在使用AJAX刷新一些页面,因此使用以下代码更新历史记录 -

/** Update the page history */
var pushState_object = {
    ajax_string: ajax_string,
    security: security,
};
window.history.pushState(pushState_object, title, permalink);

然后我在页面加载时调用这个onPopState函数 -

window.onpopstate = function(e){
    if(window.history.state !== null){
        initiate_load_updated_page(window.history.state.ajax_string, window.history.state.security, 0)
    }
}

虽然在从通过AJAX生成内容的页面转到以通常方式加载的页面时使用后退按钮,但我遇到了一些问题.URL将更改,但页面将不会重新加载.再次点击返回会带我到页面,正如我所料,然后前进工作正常 - 这只是后退按钮不起作用的一种情况.

这里的任何建议将不胜感激.

我正在建立一个网站,从主页我将在网站上打开一些其他URI到一个灯箱(AJAX),我想使用HTML5推送状态和哈希刘海作为后备来管理状态的变化.

现在我希望网址可以抓取,Facebook可分享/可爱.

如果用户浏览器支持HTML5推送状态,没问题,他可以共享URL(例如http://myserver/example:),Facebook会在静态内容中找到合适的OG metas.

但是如果用户使用HTML4浏览器,他会有一个网址http://myserver/#!/example.我希望他能够通过facebook分享它...

现在看起来Facebook支持_escaped_fragment_替换方法,所以我只是将请求重定向http://myserver/?_escaped_fragment_=/example 到http://myserver/example ,每个人都应该开心...

所以我在我的htaccess中添加了重写条件:

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=([^&]*)
RewriteRule .* http://%{HTTP_HOST}/%1? [R=301,L,NE]

我的问题是,我不能使它与Facebook一起工作,有了Facebook linter它似乎百分之一的时候,在hashbang之后的URL部分逃脱,导致像http://myserver/%2Fexample其中的网址 到404 :-(

有谁知道如何欺骗Facebook不逃避URL的这一部分？我可以在apache mod_rewrite端做点什么吗？

我也对任何其他有效的ajax可抓取/可喜欢的URL策略持开放态度;)

我想在不重新加载的情况下更改html.我这样做:

$('#left_menu_item').click(function(e) {
    if (!!(window.history && history.pushState)) {
        e.preventDefault();
        history.pushState(null, null, newUrl);
    }
});

它工作正常.但是,如果我想返回"返回"按钮 - 浏览器更改以前的网址,但它不会重新加载页面.为什么？

我们已经建立了一个空缺的搜索引擎.出于速度和良好用户体验的原因,我们使用了"单页应用程序"(SPA)的体系结构.我们知道对于SPA架构而言,启用SEO是一项挑战,因此我们进行了大量优化以实现SEO.虽然Google正在为我们的网页编制索引,但我们在Google上的排名非常差,我们正在寻求改善这一点的建议.我们遵循了谷歌的建议,但没有满意.

由于Google僵尸程序不会执行客户端javascript,因此无法直接由Google-bot索引SPA.没有javascript,我们的网站几乎不包含任何内容,因为数据是以json格式异步读取的,并且大多数HTML都是在客户端上呈现的.渲染由称为" knockout " 的框架完成,该框架支持将HTML模板数据绑定到javascript对象.可以使用客户端URL来解决SPA中的不同页面.为了使这些页面可供Google阅读,我们的客户端网址包含一个"#"后跟一个"!".这种'hash-bang'语法触发Google机器人将URL重写为特殊的"服务器端"URL.当我们的服务器访问此特殊URL时,我们会触发一个"无头浏览器"来呈现服务器上的页面.然后将完整的HTML语法(在javascript执行之后)发送到客户端.谷歌机器人可以使用这个所谓的HTML快照来索引页面.为了告诉Google我们的SPA中有哪些页面,我们提供了一个sitemap.xml,其中包含可以访问的不同网址.当我们要求Google显示从我们网站编制索引的网页时,我们会看到Google僵尸程序确实访问了我们的网页并将其编入索引.因此,我们的结论是,从技术上讲,我们的工作做得很好,但这些网页似乎没有足够高的排名可以出现在正常的Google搜索中.我们不确定这是否与我们使用SPA架构的事实有关,但结果是我们的页面无法找到.

我们想知道是否有人在谷歌排名方面有相同的技术经验,如果有人有其他建议可以帮助我们提高SPA的SEO排名(没有完全改变网站到传统的服务器端渲染)技术).

我有一个网页,使用history.pushState片段标识符(ie #Heading1)和jQuery的animate方法在文档中导航.

这是我导航到文档中某个位置的方法:

$('nav a').click(function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  history.pushState(null, null, href);
  $('#address').val(location.pathname + href);

  $('html, body').animate({
    'scrollTop': $(href).offset().top + 'px'
  });

在iOS上使用谷歌浏览器,地址按预期更新,滚动动画工作正常,但后退/前进按钮不会转到识别的标签.

我应该注意,使用后退/前进按钮时,地址栏中的URL 会发生变化.它只是没有去识别标签.

我在iOS上使用谷歌浏览器时才看到这个问题; iPhone和iPad都有.

我在CodePen上创建了一个Pen,其中包含我的代码子集,可以演示这个问题:http://codepen.io/Ghodmode/pen/YqKGga

更新:
我更新了笔,使其在iPhone/iPad上更容易测试.使用调试视图可能更好:http://s.codepen.io/Ghodmode/debug/YqKGga

更新2:
我在CodePen上创建了另一个应该展示问题的页面.这一次,没有jQuery:http://s.codepen.io/Ghodmode/debug/jqOqpq

我还没有能够测试这个,因为我没有直接访问iPhone/iPad,但我真的不认为这个问题与jQuery有什么关系.

它工作正常:

• iPhone/iPad上的Safari
• Android上的Google Chrome
• Android上的Mozilla Firefox
• Windows上的Google Chrome
• Windows上的Mozilla Firefox
• Windows上的Internet Explorer

我应该注意到我个人没有任何iOS设备来测试这个,但我确实有一个可靠的测试人员向我发送任何问题的视频和截图.

由于动画按预期工作,它似乎不是一个jQuery问题.