骨干.历史记录在ie9中没有更新.后退按钮坏了



在我们的应用中,我们实际上有两个Backbone SPA应用。第一个是用于登录、注册和其他未认证用户的功能。它的URL类似于http://www.example.com/registration#signin。一旦您登录,您将被重定向到我们的主Backbone应用程序http://www.example.com/ui#home。

在我的主UI应用程序中,我使用Backbone。history without pushState。应用程序文件看起来像这样:

define(function (require) {    
    var App = new Marionette.Application();
    App.addInitializer(function (options) {
        ...
    });
    ...
    App.on('initialize:after', function () {
        $(function(){
            if (Backbone.history) {
                Backbone.history.start({ root: '/ui' });
            }
        });
        $.log("**WebApp**: Marionette app started.");
    });
    return App;
});

当然,除了ie9(也许是ie10,我需要检查一下),任何浏览器都可以完美地工作。在ie9中,所有的路由都可以正常工作。点击链接(如http://www.example.com/ui#anotherpage)就可以了。但是,当用户在浏览器中单击Back按钮时,它们不会被发送回上次触发的路由。相反,它们被发送到http://www.example.com/registration#signin,这是我们的web服务器Node提供的最后一个页面。当我点击链接时,我可以看到那段历史。length和Backbone.history.history.length没有更新。

所有的路由都是从链接/URL触发的。我没有在代码中使用router.navigate()。下面是我们的Router的一些例子:

define(function (require) {
    var Backbone = require('backbone'),
        Marionette = require('marionette');
    return Backbone.Marionette.AppRouter.extend({
        appRoutes: {
            "": "showHome",
            "home": "showHome",
            "foo": "showFoo"
        }
    });
});

和控制器:

define(function (require) {
    var Backbone = require('backbone'),
        Marionette = require('marionette');
    return Backbone.Marionette.Controller.extend({
        showHome: function () {
            require(['webapp','modules/home'], function (WebApp) {
                WebApp.module("Home").start();
                WebApp.module("Home").controller.showModule();
            });
        },
        showFoo: function () {
            require(['webapp', 'modules/foo'], function (WebApp) {
                WebApp.module("Foo").start();
                WebApp.module("Foo").controller.showModule();
            });
        }
    });
});

更新:

在进一步的研究中,问题是旧版本的IE不记录其历史中的哈希变化。参见-更改位置。然后按后退按钮- IE的行为不同于其他浏览器。但我仍然不确定解决这个问题的方法是什么。我猜它会以某种方式涉及手动处理哈希变化事件与插件,如jQuery Hashchange和做…什么东西吗?手动设置IE的历史记录?或者制作一个自定义历史对象,并在IE中检测到后退按钮时使用它?

我在我们的一个IE应用程序中遇到了同样的问题。像下面这样启动主干历史可以。

Backbone.history.start({
            pushState: true,
            hashChange: false
        });

更新:正如T Nguyen所提到的,当你将pushState设置为true时,hash URL不再触发路由。除非你为所有主干路由添加服务器端支持,否则你需要在客户端添加一个事件处理程序来捕获适当的链接,并在路由

上调用.navigate()。

最新更新