Html4浏览器不支持HTML5的History API的history.pushState和history.replaceState方法

时间:2013-04-05 13:36:22

标签: ember.js pushstate history.js

我正在使用ember应用程序(使用ember-1.0.pre.js)。我正在尝试在IE8上提供跨浏览器兼容性。

问题是在每次转换后生成url,对用户来说似乎是错误/错误的。假设我点击了the_ domain_name/sell/new之类的网址,它最初让我看到我们应用程序的销售页面。然后我尝试通过一个名为“购买”的新状态,这将使我进入我们应用程序的购买页面。

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

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

生成的网址包含两个不正确的内容,

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

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

  3. 我试图找出问题,发现HTML4浏览器不支持HTML5中的History API中的pushState和replaceState方法。我如何在IE8上提供支持任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:11)

我建议将History.js作为不支持历史记录API的浏览器的填充:https://github.com/browserstate/history.js

正在努力:

HTML5浏览器:

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

HTML4浏览器:

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

添加jquery.history.js&在您的Ember App中注册history.js位置处理程序。

以下是我从原始Ember.HistoryLocationFull code

修改的部分
(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);
})();

然后在您的App中使用此polyfill:

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