Подтвердить что ты не робот

Проблемы с маршрутизатором Backbone.js и перенаправление с Internet Explorer

бит странный, и я немного озадачен...

У меня есть страница, на этой странице следующее (ну, с несколькими изменениями имени):

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

Маршрутизатор продолжает создавать экземпляры, просматривать и т.д. Все работает отлично в Chrome, Safari, Firefox и Opera. Но не в IE 8 или 9 (может быть, 10 тоже, я не тестировал).

В IE8 или 9, когда страница сначала запрашивается, она начинает загружаться, но как только документ будет готов (и, следовательно, создается экземпляр роутера и история началась), страница перенаправляется на корень сайта.

В консоли нет ничего, что я мог видеть до перенаправления. Нет никакого кода в другом месте, который мог бы как-то это сделать - я имею в виду, что у нас есть большая база кода, поэтому всегда это возможно, но нет ничего, что касается маршрутизации или API истории, которые могут быть противоречивыми.

Странная часть - это если опция pushState: true удалена, страница не перенаправляется, она загружается полностью, как и должно быть - маршрутизатор не собирается делать что-либо, поскольку теперь он ожидает маршрутов стиля hashbang, но это, по крайней мере, не приведет вас к корню сайта. Добавьте параметр обратно, и он снова сломается...

Итак, моя первая мысль была явно "Ну... API истории не поддерживается в IE8 или 9... должно быть, это", но тогда Backbone.js должен вернуться к URL-адресам стиля hashbang для тех, кто старше браузеров, так что этого не может быть.

Что на самом деле заставляет IE переадресовывать обратно на главную страницу при работе с маршрутизатором Backbone.js?

ИЗМЕНИТЬ

(Ниже можно, вероятно, проигнорировать сейчас, поскольку EDIT 2 доказывает, что он ничего не сделал, хотя yay для удаления концевых запятых)

Хорошо, поэтому, после небольшой отладки и действительно сжимая соломинку, я обнаружил, что на самом деле маршрутизатор не был создан - никакой метод инициализации не вызван, нет возможности вызвать пользовательские методы на маршрутизаторе (я просто сделал глупый метод alert и console.log) и вызвал его сразу после var router = new App.Routers.ExampleRouter();.

Вызов метода возвращал ошибку по строкам: "объект не поддерживает это свойство или метод" (все это снова IE, отлично в других браузерах). Однако это не было уникальным для маршрутизатора, я также применил новую модель и сделал то же самое, одно и то же... просто не был "замечен". Google об ошибке объекта предложил запятые. Правильно, в кодовой базе были некоторые, я удалил их все, и казалось, что все идет хорошо. Внезапно маршрутизатор (и модель) был там очень много - метод инициализации вызвал, вызванный специальный метод и т.д. Я понял, что запятые, возможно, остановили все анализируемые JS (мы конкатенируем несколько файлов).

Я, очевидно, делал все это с удаленной опцией pushState. Затем я добавил pushState: true обратно в искреннее мышление, которое исправило бы это, если бы это произошло. В то время я думал: "Ах, роутер никогда не существовал", поэтому, возможно, Backbone.History.Start({pushState: true}) был вызван, отправил его в поисках маршрута, и никто из них не существовал из-за того, что маршрутизатор не был создан, и откат на главную страницу был всего лишь своего рода побочным эффектом ", но, увы, нет, то же самое все еще происходит. Добавьте в опцию pushState: true, и страница просто не загружается и возвращает вас на домашнюю страницу.

РЕДАКТИРОВАТЬ 2

Хорошо, поэтому я пробовал некоторые другие вещи безрезультатно. Я сделал совершенно отдельную пустую страницу, которая вытаскивает jQuery, Backbone.js и Underscore.js через CDN и содержит некоторые баребоны JavaScript для создания маршрутизатора, создания экземпляра и вызова Backbone.History.Start(). Код целиком для этой страницы:

<!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>

То, что это, полностью баребоны, никакого влияния от других активов сайта и т.д. То же самое все же происходит. Все браузеры делают то, что ожидается, кроме IE (проверено на 8 и 9), который снова начинает загружать страницу, затем выполняет маршрут и внезапно перенаправляется на главную страницу. Если я отключу pushState и использую hashbangs, все будет работать так, как ожидалось, - поэтому маршрутизация "работает" для меня в IE, но не с pushState, установленным в true.

Я не вижу, что это больше похоже на интерфейс, поскольку я убрал все, что могу. Есть ли способ, связанный с сервером? Back-end - это Ruby on Rails, и проблема проявляется локально и на промежуточных серверах. Или я грубо неправильно понял, как Backbone.js деградирует pushState для hashbangs с IE?

РЕДАКТИРОВАТЬ 3

Я загрузил видео проблемы

4b9b3361

Ответ 1

Internet Explorer не поддерживает pushState до IE 10, см.

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

Изменить:

Чтобы запустить History с помощью дополнительного pushState, вы можете пойти с этим:

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

Ответ 2

Мне кажется, что ваше приложение не подается с корневого URL (/).

Вы запрашиваете http://example.com/sub/ietest.html, а Backbone перенаправляет на http://example.com/#sub/ietest.html.

Вероятно, вы хотите инициализировать Backbone.history, указав корневой URL:

Backbone.history.start({pushState: true, root: '/sub/'});

Я действительно не врывался в исходный код вашей страницы (и JS был миниатюрный), но это, похоже, так. Может быть, root: '/bible/'?

Ответ 3

попробуйте прокомментировать все вызовы console.log(). В моем случае это была проблема для ie9. Да, я также задаю вопрос, почему:-), очень странно

(я не использовал pushState, но это не имеет значения, я думаю)

Ответ 4

Это, похоже, работает для меня с точки зрения получения IE8/9 (мы не поддерживаем 7 на работе), чтобы правильно использовать хэш:

var pushState = !!(window.history && window.history.pushState),
    settings = { pushState: pushState, silent: true, hashChange: !pushState ? true : false };
Backbone.history.start(settings);

Я сохранил объект настроек отдельно, поскольку у меня возникли проблемы с услугами, которые я использую на работе, и не возвращать результаты по какой-либо причине. Независимо от того, возникают ли проблемы, связанные с добавлением этого изменения, все еще обсуждается. Это также ограничивается моим вариантом использования.

также отметить для IE, что вам теперь нужно обрабатывать хэши для deeplinking.

Я использую "silent": true b/c. Я получаю начальные результаты при загрузке страницы, и это предотвратит любые вызовы. из базовых документов:

Если сервер уже отобрал всю страницу, и вы не хотите, чтобы начальный маршрут запускался при запуске "История", пройдите молчание: "Истина".

Ответ 5

Не уверен, что этот параметр был доступен, когда вопрос был первоначально отправлен...

Я обошел эту проблему для браузеров < IE 10 (без поддержки PushState), добавив опцию {hashChange: false} при вызове start, как описано здесь - http://backbonejs.org/#History-start.

Ответ 6

Проверьте это:

if(!(window.history && history.pushState)) {
        Backbone.history.start({ pushState: false, silent: true });
        var fragment = window.location.pathname.substr(
            Backbone.history.options.root.length);
        Backbone.history.navigate(fragment, { trigger: true });
    }
    else {
        Backbone.history.start({ pushState: true });
    }

Кредиты идут в http://blog.isotoma.com/2014/01/backbone-history-and-ie9/

Ответ 7

это сработало для меня: Backbone.history.start({root: '/my_app_dir_here/'});