javascript - Backbone.js 路由器和 Internet Explorer 重定向问题

标签 javascript backbone.js

有点奇怪,我有点困惑......

我有一个页面,该页面上有以下内容(好吧,有一些名称更改):

$(document).ready(function() {
  var router = new App.Routers.ExampleRouter();
  Backbone.history.start({pushState: true});
})

路由器继续实例化一些集合、 View 等。在 Chrome、Safari、Firefox 和 Opera 中一切正常。但不是在 IE 8 或 9(也可能是 10,我还没有测试过)。

在 IE8 或 9 中,当第一次请求页面时,它开始加载,但是一旦文档准备好(因此路由器实例化并启动历史记录),页面就会重定向到站点根目录。

在重定向之前,我在控制台中看不到任何内容。其他任何地方都没有任何代码可以以某种方式做到这一点 - 我的意思是,我们有一个庞大的代码库,所以它总是有可能的,但是没有任何处理路由或历史 API 的东西可能会发生冲突。

奇怪的部分是,如果 pushState: true 选项被删除,页面不会重定向,它应该完全加载 - 路由器不会继续做任何事情,因为它现在期待 hashbang 风格的路由,但它至少没有不要把你踢回网站的根。重新添加该选项,它再次中断...

所以,我的第一个想法显然是“嗯……IE8 或 9 不支持历史 API……一定是这样”但是 Backbone.js 应该恢复到那些旧浏览器的 hashbang 样式的 URL,所以不可能是那样。

在处理 Backbone.js 路由器时,到底是什么导致 IE 重定向回主页?

编辑

(现在可能可以忽略以下内容,因为 EDIT 2 证明它什么也没做,尽管删除尾随逗号是可以的)

好的,经过一些调试并真正捕获稻草,我发现路由器实际上并没有被实例化 - 没有调用初始化方法,没有能力在路由器上调用自定义方法(我刚刚对 alert 做了一个愚蠢的方法和 console.log ) 并在 var router = new App.Routers.ExampleRouter(); 之后调用它。

调用该方法会返回如下错误:“对象不支持该属性或方法”(所有这些都只是 IE,在其他浏览器中也可以)。但这并不是路由器独有的,我也调用了一个新模型并做了同样的事情,同样的事情......只是没有被“看到”。对象错误的 Google 建议使用尾随逗号。代码库中确实有一些,我删除了所有这些,看起来事情进展顺利。突然之间,路由器(和模型)非常多 - 调用了初始化方法,调用了自定义方法等。我认为逗号可能已经停止了所有正在解析的 JS(我们连接了多个文件)。

我显然是在删除 pushState 选项的情况下完成所有这些操作的。然后我重新添加了 pushState: true 真正地认为可以解决上面发生的事情。我当时想“啊,路由器实际上从未‘存在’,所以也许 Backbone.History.Start({pushState: true}) 被调用发送它寻找路由,由于路由器没有被实例化,所以不存在,并且回扣到主页只是某种副作用”但唉,不,完全相同的事情仍在发生。添加 pushState: true 选项,页面不会加载,并将您踢回主页。

编辑 2

好的,所以我尝试了一些进一步的事情,但无济于事。我制作了一个完全独立的空白页面,它通过 CDN 引入 jQuery、Backbone.js 和 Underscore.js,并包含一些用于创建路由器、实例化它并调用 Backbone.History.Start() 的准系统 JavaScript。该页面的完整代码是:
<!DOCTYPE html>
<html>
  <head>
    <title>Test IE</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script>
      $(document).ready(function(){

        App = {
          Routers: {

          }
        };

        App.Routers.RouterTest = Backbone.Router.extend({
          routes: {
            "ietest.html" : "helloWorld"
          },

          initialize: function() {
            console.log("router init");
          },

          helloWorld: function() {
            alert("helloWorld!")
          }
        });
        router = new App.Routers.RouterTest();
        Backbone.history.start({pushState: true});
      });
    </script>

  </head>
  <body>

  </body>
</html>

就是这样,完全准系统,不受任何其他站点 Assets 等的影响。完全相同的事情仍然发生。所有浏览器都按预期执行,除了 IE(在 8 和 9 上测试),它再次开始加载页面,然后执行路由并突然重定向回主页。如果我关闭 pushState 并使用 hashbangs,一切都会按预期工作 - 所以路由在 IE 中对我来说“有效”,只是在 pushState 设置为 true 时不行。

我看不出这是一个前端的东西,因为我已经尽可能地剥离了一切?有没有办法这是与服务器相关的事情?后端是 Ruby on Rails,问题出现在本地和临时/实时服务器上。还是我严重误解了 Backbone.js 使用 IE 将 pushState 降级为 hashbangs 的方式?

编辑 3

我有 uploaded a video of the problem

最佳答案

Internet Explorer 直到 IE 10 才支持 pushState,请参阅

http://caniuse.com/#search=pushState

编辑:

要使用可选的 pushState 启动 History,您可以使用以下命令:

Backbone.history.start({pushState: "pushState" in window.history});

关于javascript - Backbone.js 路由器和 Internet Explorer 重定向问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12062056/

相关文章:

javascript - 模拟 DayJs 默认函数及其链式方法

javascript - React - 状态不一致

javascript - Chrome 扩展程序 : Clicking notification opens multiple tabs

backbone.js - 测试失败然后成功

javascript - 引发一系列事件 Backbone 事件 :name

javascript - Backbone.js 和 Django Rest Framework 注册和身份验证

javascript - 主干单击事件未触发

php - 从 Backbone 到 Slim REST 服务的 PUT 请求导致 404 Not Found

javascript - Material-UI:以编程方式触发悬停效果

javascript - 移动网站 : -webkit-overflow-scrolling: touch conflicts with position:fixed