Html4浏览器不支持历史API从HTML5的history.pushState和history.replaceState方法 [英] Html4 browsers does not support history.pushState and history.replaceState methods of History API from HTML5

问题描述

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

问题是每次转换后都会使用url生成，对用户来说似乎不正确/ falsy。让我们说，我打了这个网址，就像我最近把我交给我们的应用程序的销售页面的 the_ domain_name / sell / new 然后我尝试转移一个名为购买的新状态，这将在我的应用程序的购买页面上登陆。

新的状态转换生成一个URL the_ domain_name / sell / new＃ / offer / purchase？& suid = 1365149991779013736531657156165 在IE8地址栏中，而不是 domain_name / offers / purchase 。 / p>

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

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

1. 初始前缀/ sell / new＃。




2. 参数？& _suid = 1365149991779013736531657156165在url的查询字符串中。

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

解决方案

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

它正在工作：

HTML5浏览器

• Firefox 4 +


• Chrome 8 +


• Opera 11.5


• Safari 5.0+


• Safari iOS 4.3 +

HTML4浏览器 p>

• 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 &注册一个 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）{
历史记录。 replaceState（{path：path}，null，path）; 
} 
}）; 
 Ember.Location.registerImplementation（'historyJs'，Ember.HistoryJsLocation）; 
}） （）; 
  

然后在您的应用程序中使用此polyfill：

  App.Router.reopen（{
 location：'historyJs'
}）; 
  

I am working on an ember application (using ember-1.0.pre.js). And I'm trying to provide cross browser compatibility on IE8.

The issue is with url generate after every transition, it seems incorrect/falsy to user. Let say I hit the url like the_ domain_name/sell/new which initially land me to on sell page of our application. and then i tries to transit a new state called "Purchase" which will land me on purchase page of our application.

The new state transition generates a URL the_ domain_name/sell/new#/offers/purchase?&suid=1365149991779013736531657156165 in IE8 addressbar instead of the domain_name/offers/purchase.

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

The generated url includes two incorrect things,

1. The initial prefix "/sell/new#".

2. The parameter "?&_suid=1365149991779013736531657156165" in query string of url.

I tried to figure out the issue and found that HTML4 browsers does not supports pushState and replaceState methods from History API from HTML5. How can i provide the support on IE8 Can anyone help me on this?

解决方案

I suggest History.js as polyfill for browsers not support History API: https://github.com/browserstate/history.js

It is working in:

HTML5 Browsers:

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

HTML4 Browsers:

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

Add jquery.history.js & Register a history.js location handler into you Ember App.

Here are the parts I modified from original Ember.HistoryLocation ( Full 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);
})();

Then use this polyfill in your App:

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

这篇关于Html4浏览器不支持历史API从HTML5的history.pushState和history.replaceState方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！