标签: pushstate

我遇到以下情况的问题.

1. 用户访问网站
2. 用户单击使用history.pushState更新URL的链接
3. 通过ajax加载的部分页面内容(使用jQuery)
4. 用户单击加载新页面的常规链接
5. 用户单击返回以返回pushState条目
6. 该页面现在仅显示通过ajax检索的页面部分

我已经使用pushState为各种事情增加了一个网站,结果是一个令人震惊的响应式网络应用程序,但这个问题阻止我使用它.

以下是代码示例:

$('a').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  $('#content').load(url);
}
window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}

笔记:

• 在window.onpopstate函数中发出警报时,似乎在步骤5中未触发该事件.这是一个错误吗？
• 只有在使用ajax时才会出现此问题.
• 我不得不分开popstate函数,所以我可以在pushState之后调用它.有没有办法手动触发window.onpopstate事件？

我正在使用$ routeProvider和$ locationProvider在单页面应用程序(SPA)中处理pushstate URLS,如下所示:

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URL用于从服务器提取可能存在或不存在的内容.

如果这是一个普通的多页面网站,对丢失内容的请求将触发来自服务器的404标头响应,并且对移动内容的请求将触发301.这将提醒谷歌丢失或移动的内容.

比方说,我点击了这样一个URL:

http://example.com/pet/123456

并且说数据库中没有这样的宠物,我的SPA如何在该内容上返回404.

如果没有这个,是否有其他方法可以正确地提醒用户或搜索引擎所请求的URL不存在？还有其他一些我不考虑的解决方案吗？

我正在使用jQuery BBQ插件来跟踪用户在页面中的进度.但是,我只想在用户的历史记录中创建一个额外的条目,而不是每个哈希变化都创建一个条目.

我已经尝试了jQuery.bbq.pushState和merge_mode方法,没有成功:仍然添加了新的历史记录条目:

jQuery.bbq.pushState({ sort: encodeURIComponent(sort) });

我也尝试过location.replace(),但这对Safari 5.1.2不起作用.

location.replace('#' + encodeURIComponent(sort))

什么是修改哈希的跨浏览器解决方案,而不会在历史记录中添加太多条目？

当用户使用HTML5 popstate处理程序在浏览器历史记录中导航回来时,我正在尝试检索滚动位置.

这是我有的:

$(document).ready(function () {

    $(window).on('popstate', PopStateHandler);

    $('#link').click(function (e) {

        var stateData = {
            path: window.location.href,
            scrollTop: $(window).scrollTop()
        };
        window.history.pushState(stateData, 'title', 'page2.html');
        e.preventDefault();

    });

});

function PopStateHandler(e) {
    alert('pop state fired');
    var stateData = e.originalEvent.state;
    if (stateData) {
        //Get values:
        alert('path: ' + stateData.path);
        alert('scrollTop: ' + stateData.scrollTop);
    }
}


<a id="link" href="page2.html"></a>

当我向后导航时,我无法检索stateData的值.

我认为这是因为popstate正在检索初始页面加载的值,而不是单击超链接时我推送到历史记录的状态.

我怎么能在导航回来时获得滚动位置？

该pushState方法接受状态对象.Firefox文档称该对象的最大大小为640kb.是否在规范中定义了浏览器可以实现的最小最大大小是多少？我可以合理地期望主流浏览器能为我提供至少100kb的数据吗？

编辑:我用Chrome测试了它,它仍然适用于超过1MB的状态对象.

pushState Backbone.js版本0.5更新引入了支持.

从骨干文档:

请注意,使用真实URL要求您的Web服务器能够正确呈现这些页面,因此也需要进行后端更改.例如,如果您的路径为/ documents/100,则如果浏览器直接访问该网址,则您的网络服务器必须能够提供该网页.对于完整的搜索引擎可抓取性,最好让服务器为页面生成完整的HTML ...但如果它是一个Web应用程序,只需呈现与根URL相同的内容,并使用Backbone填充其余内容视图和JavaScript工作正常.

这可能看起来像一个微不足道的问题,但我想知道是否有人可以帮助我使用一些特定的(最好是快速的)node.js服务器代码.我该如何处理这些路线？我有点困惑.

以下是我的应用程序路由器模块的相关摘录:

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'about': 'about'
    },
    index: function() {
        indexView.render();
    },
    about: function() {
        aboutView.render();
    }
});

var initialize = function() {
    var router = new Router;
    Backbone.history.start({ pushState: true });
}

return {
    initialize: initialize
};

我这里只有一个顶级路线和一个关于页面的路线.那么我应该如何设置一个允许我导航到的节点服务器:

domain.com
domain.com/about
domain.com/#/about // <- for browsers that don't support pushState

这是我正在使用的

码:

<a href="#" onclick="window.onpopstate = function() { alert('pop'); };
    return false; ">set up window.onpopstate
</a><br>
<a href="#somehash2">change hash</a>
<div onclick="alert(location.href);">show location.href</div>?

为什么单击该change hash链接会触发popstate,如果单击该change hash链接然后单击返回,它是否应该仅被触发？

正如GitHub的博客中所见,他们已经实现了HTML5的JavaScriptpushState浏览功能(适用于现代浏览器),无需使用Hash Bangs即可实现AJAX导航.

代码很简单:

$('#slider a').click(function() {
  history.pushState({ path: this.path }, '', this.href)
  $.get(this.href, function(data) {
    $('#slider').slideTo(data)
  })
  return false
})

这非常优雅地允许他们:

1. 通过AJAX而不是整页请求新内容
2. 动画过渡
3. 和改变浏览器URL (不仅仅是#,像Twitter那样- twitter.com/stackexchange →交通twitter.com/#!/stackexchange)

我的问题是,JavaScript如何防止pushState一个网站使用模仿另一个网站,从而导致令人信服的网络钓鱼攻击？

至少看起来域名无法更改,但网站内的多条路径,可能是多个不相关且不可信的内容提供商？一条路径(IE / joe)是否可以模仿另一条路径(pushState / jane)并提供模仿内容,可能具有恶意目的？

假设我使用Backbone pushstate并导航到带有查询参数的页面:

domain.com/user/111?hello=123

当我执行这个:

Backbone.history.navigate('/settings', true);

我的设置页面加载完美,但？hello = 123保留在URL中...

domain.com/settings?hello=123

并且该查询参数保留在我浏览网站的所有位置的URL中...

我正在将基于Backbone.js和jQuery的单页Web应用程序迁移到Chrome扩展.但是,pushState基于hashbang的路由器模式似乎都不能很好地适应扩展中的环境.我得出的结论是,我最好直接渲染用户交互视图,window.location 完全绕过系统.但是,我不太确定如何在不改变对Router.navigate几十个文件的调用的情况下实现它.

是否有可插拔/模块化方式来保持Backbone路由系统但绕过对URL的任何更改？