ember.js - Html4 浏览器不支持来自 HTML5 的 History API 的 history.pushState 和 history.replaceState 方法

Question

我正在开发一个 ember 应用程序（使用 ember-1.0.pre.js）。我正在尝试在 IE8 上提供跨浏览器兼容性。

问题在于每次转换后都会生成 url，这对用户来说似乎不正确/虚假。假设我点击了 the_ domain_name/sell/new最初让我进入我们应用程序的销售页面的 url。然后我尝试转换一个名为“Purchase”的新状态，这将使我进入我们应用程序的购买页面。

新的状态转换 在 IE8 地址栏中生成一个 URL，而不是.the_ domain_name/sell/new#/offers/purchase?&suid=1365149991779013736531657156165the domain_name/offers/purchase

注意： the_domain_name =http://www.example.com

生成的 url 包含两个不正确的东西，

1. 初始前缀“/sell/new#”。

2. url查询字符串中的参数“?&_suid=1365149991779013736531657156165”。

我试图找出问题并发现 HTML4 浏览器不支持来自 HTML5 的 History API 的 pushState 和 replaceState 方法。我如何在 IE8 上提供支持 谁能帮我解决这个问题？

Answer 1

我建议History.js作为不支持 History API 的浏览器的 polyfill： https ://github.com/browserstate/history.js

它适用于：

HTML5 浏览器：

• 火狐 4+
• 铬 8+
• 歌剧 11.5
• Safari 5.0+
• Safari iOS 4.3+

HTML4 浏览器：

• 即 6、7、8、9
• 火狐 3
• 歌剧 10, 11.0
• 野生动物园 4
• Safari iOS 4.2、4.1、4.0、3.2

添加jquery.history.js 并将位置处理程序注册history.js到您的 Ember 应用程序中。

这是我从原始修改的部分Ember.HistoryLocation（完整代码）

(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);
})();

然后在你的应用程序中使用这个 polyfill：

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