iOS上的历史API是否被破坏？ （位置栏不在pushState上更新） [英] Is History API broken on iOS? (Location bar doesn't update on pushState)

问题描述

看来如果你做了一个在iOS上简单的 window.history.pushState ，地址栏不会更新，除非它响应用户手势。状态本身确实被推送（正如你可以通过点击后退按钮来看到的）。

这是我可以想出的最小的测试用例：

http://thelink.is/history-api-ios -bug

在支持History API的桌面浏览器上，您应该会看到位置栏中的URL更改为/ 0，/ 1等。 ， 每一秒。在iOS上 - 使用iPhone（运行iOS 4.3）和iPad（运行iOS 4.3.3）进行测试 - 地址栏不会更新，但点击后退按钮会带您正确的以前的位置（自测试用例开始404没有后端逻辑来处理这些URL）。

想法？解决方法？一个肩膀哭泣和拥抱？

更新：此问题已在iOS 5中得到解决。

解决方案

所以底线是iOS已经在历史API的基础上增加了自己的安全性，这意味着你不能使用脚本来改变网址。只有用户操作才能允许历史记录API根据Aral的示例更改网址 - 即点击。

解决方法是使用散列（aka片段标识符）

而不是 history.pushState 我们只需更改位置：

  var i = 0; 
 var locationUpdateInterval = setInterval（function（）{
 window.location.hash = i; 
 i ++; 
}，1000）; 
  

要在iOS应用程序中更改该位置或者如果他们有固定链接一个特定的页面/面板在你的应用程序：

  //命名函数用于以后
函数hashchange（）{ 
 var pageId = location.hash.substr（1）; //放下＃符号
 //用pageId做一些事
} 
 
 window.onhashchange = hashchange; 
 
 // onload  - 如果网址上有哈希值，请尝试用它做一些事情
 if（location.hash）hashchange（）; 
  

我们无法使用 pushState / popState ，但它的安全性与无法触发全屏视频相同，除非用户启动操作，这与下载视频或音频在iOS上的内容 - 你不能编写脚本，用户必须启动它（以某种方式或另一个）。

正如关于Android的说明 - 问题非常相似，所以这（应该）也可以作为Android的解决方法。

如果您想要桌面支持，大多数浏览器都支持 onhashchange 但是，你猜对了，IE是缺乏的 - 所以你可以在那里填充那个坏男孩（虽然需要jQuery ...）： http://benalman.com/projects/jquery-hashchange-plugin/

希望有帮助。

Filing this under the either the I Can't Believe No One Noticed This Before or the I Must Be Missing Something categories:

It appears that if you do a simple window.history.pushState on iOS, the location bar doesn't update unless it is in response to a user gesture. The state itself does get pushed (as you can see by hitting the back button button).

Here's is the tiniest test-case I could come up with recreate the issue:

http://thelink.is/history-api-ios-bug

On a desktop browser that supports the History API, you should see the URL in the location bar change to /0, /1, etc., every second. On iOS – tested with iPhone (running iOS 4.3) and iPad (running iOS 4.3.3) – the location bar doesn't update but hitting the back button will take you the correct previous location (which will 404 on the test-case since there's no back-end logic to handle those URLs).

Thoughts? Workarounds? A shoulder to cry on and hugs?

UPDATE: this issue was fixed in iOS 5.

解决方案

So the bottom line is that iOS has added its own security around the history API, meaning that you can't use script to change the url. Only a user action can allow the history API to change the url - i.e. a click - as per Aral's example.

The workaround is to uses a hash (aka fragment identifier) on the url.

Instead of the history.pushState we'll just change the location:

var i = 0;
var locationUpdateInterval = setInterval(function(){
  window.location.hash = i;
  i++;
}, 1000);   

To capture the event either when something changes the that location in the iOS app or if they have permalink to a particular page/panel in your app:

// named function on purpose for later
function hashchange() {
  var pageId = location.hash.substr(1); // drop the # symbol
  // do something with pageId
}

window.onhashchange = hashchange;

// onload - if there's a hash on the url, try to do something with it
if (location.hash) hashchange();

It's pretty poor that we can't use the pushState/popState on iOS, but it's the same security as not being able to trigger fullscreen video unless the user initiates the action, which is the same as downloading video or audio content on iOS - you can't script it, the user must start it (somehow or another).

Just as a note about Android - the problems are pretty similar, so this (should) also work as a workaround for Android.

If you want desktop support, most browsers support onhashchange but, yep, you guessed, IE is lacking behind - so you can polyfill that bad boy in (though requires jQuery...): http://benalman.com/projects/jquery-hashchange-plugin/

Hope that helps.

这篇关于iOS上的历史API是否被破坏？ （位置栏不在pushState上更新）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！