ember.js - Los navegadores Html4 no son compatibles con los métodos history.pushState e history.replaceState de History API de HTML5

history.js

Question

Estoy trabajando en una aplicación de ascua (usando ember-1.0.pre.js). Y estoy tratando de proporcionar compatibilidad de navegador cruzado en IE8.

El problema es con generar url después de cada transición, parece incorrecto / falso para el usuario. Digamos que toco la URL como the_ domain_name/sell/new que inicialmente me lleva a la página de venta de nuestra aplicación. y luego trato de transitar un nuevo estado llamado "Compra" que me llevará a la página de compras de nuestra aplicación.

La nueva transición de estado genera una URL the_ domain_name/sell/new#/offers/purchase?& suid=1365149991779013736531657156165 en la the_ domain_name/sell/new#/offers/purchase?& suid=1365149991779013736531657156165 de the_ domain_name/sell/new#/offers/purchase?& suid=1365149991779013736531657156165 de IE8 en lugar del nombre de the domain_name/offers/purchase .

Nota: the_domain_name = http://www.example.com

La url generada incluye dos cosas incorrectas,

1. El prefijo inicial "/ vender / nuevo #".

2. El parámetro "? & _ Suid = 1365149991779013736531657156165" en la cadena de consulta de url.

Intenté descubrir el problema y descubrí que los navegadores HTML4 no son compatibles con los métodos pushState y replaceState de History API de HTML5. ¿Cómo puedo brindar asistencia en IE8? ¿Alguien puede ayudarme con esto?

Answer 1

Sugiero que History.js como polyfill para navegadores no sea compatible con History API: https://github.com/browserstate/history.js

Está trabajando en:

Navegadores HTML5:

• Firefox 4+
• Chrome 8+
• Opera 11.5
• Safari 5.0+
• Safari iOS 4.3+

Navegadores HTML4:

• IE 6, 7, 8, 9
• Firefox 3
• Opera 10, 11.0
• Safari 4
• Safari iOS 4.2, 4.1, 4.0, 3.2

Agregue jquery.history.js y registre un controlador de ubicación history.js en su aplicación Ember.

Aquí están las partes que modifiqué de Ember.HistoryLocation original ( código completo )

(function() {
  var get = Ember.get, set = Ember.set;
  var popstateFired = false;
  Ember.HistoryJsLocation = Ember.Object.extend({
    initState: function() {
      this.replaceState(this.formatURL(this.getURL()));
      set(this, ''history'', window.History);
    },
    getState: function() {
      return get(this, ''history'').getState().state;
    },
    pushState: function(path) {
      History.pushState({ path: path }, null, path);
    },
    replaceState: function(path) {
      History.replaceState({ path: path }, null, path);
    }
  });
  Ember.Location.registerImplementation(''historyJs'', Ember.HistoryJsLocation);
})();

Luego usa este polyfill en tu aplicación:

App.Router.reopen({
  location: ''historyJs''
});