我已经为此烦恼了一个多星期了......
TL;DR:在点击一定次数后,基于散列的链接在 iOS 7 上的 Safari 中停止工作。
我们的 Angular Dart 应用程序遇到了一个奇怪的问题——使用 iPhone 的人报告说链接在“一段时间”后“卡住”。典型的无用错误报告,因此我们必须努力弄清楚如何重现该问题。
最终很明显,每次点击相同次数后,iOS 7 上的 Safari 将停止导航到基于哈希的路由链接。
经过多次诊断(逐个删除应用程序的一部分,直到问题不再发生),我设法将其缩小到包含参数的路由。在这些路线被跟踪一定次数后,iOS 7 上的 Safari 就停止跟踪它们 - 就像他们被“半”点击 - 链接被加下划线,但它从未被跟踪,并且随后再点击它都不会允许必须遵守。
这是一个非常简单的 dart 应用程序,可以重现该问题:
在根文件夹中:
pubspec.yaml:
name: DartRouteChecker
description: A sample web application
dependencies:
angular: 0.14.0
browser: any
transformers:
- angular
然后在 web 文件夹中:
dartroutechecker.dart:
library dart_route_checker;
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
class MyAppModule extends Module {
MyAppModule() {
bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
bind(RouteInitializerFn, toImplementation: Routes);
}
}
void main() {
applicationFactory()
.addModule(new MyAppModule())
.run();
}
@Injectable()
class Routes
{
void call(Router router, RouteViewFactory views) {
views.configure({
'route1': ngRoute(path: '/route1', defaultRoute: true, view: 'route1.html'),
'route2': ngRoute(path: '/route2/:id', view: 'route2.html')
});
}
}
dartroutechecker.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DartRouteChecker</title>
<script async type="application/dart" src="dartroutechecker.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="dartroutechecker.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
dartroutechecker.css
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
#sample_text_id {
font-size: 24pt;
text-align: center;
margin-top: 140px;
-webkit-user-select: none;
user-select: none;
}
route1.html:
<h1>ROUTE 1</h1>
<div>
<a href="#/route2/1">Go to second route</a>
</div>
route2.html:
<h1>ROUTE 2</h1>
<div>
<a href="#/route1">Go to first route</a>
</div>
使用 pub build 构建应用程序(生成 javascript),然后使用装有 iOS 7 的 iPhone 导航到它(我在装有 iOS 7.1.2 的 iPhone 5 和 iPhone 4S 上对其进行了测试)。单击“转到第二条路线”,然后一遍又一遍地单击“转到第一条路线”,直到您点击 30 次左右 - 然后链接将停止响应......几乎总是恰好 30 次点击会导致它(虽然我有有一两次看到它在 43 左右,虽然我不能确定我在那段时间没有点击其他东西 - 上周我做了太多令人讨厌的点击,我觉得我有点疯狂...)
当 iPhone 插入 mac 进行调试时,我无法重现此问题。如果两个路由都不包含参数,它也不会发生。如果在路由初始化类中定义了更多路由,或者路由包含多个参数,则点击次数会减少。最初我认为问题可能是我们的一条 route 有一个符号,但事实并非如此。在任何其他浏览器中都不会发生这种情况,包括 iOS 上的 Chrome。
我怀疑这可能是 Safari 中的一个错误(可能与 Safari 没有正确处理散列更改有关,并且在使用 appcache 时没有正确处理浏览器历史记录(顺便说一句,我在这里没有使用)),但这是一个真正的阻碍对我们来说 - 我们的许多客户都在使用 iPhone,因此如果我们的应用程序在 iPhone 上的标准浏览器上一直卡住,我们就会陷入困境。
有没有人见过这样的事情?有人对解决方法有任何建议吗?还是新的职业?......
编辑:
我们已将问题追溯到 route.dart 中的路由方法:
https://github.com/angular/route.dart/blob/master/lib/client.dart#L480
在方法 gotoUrl ( https://github.com/angular/route.dart/blob/master/lib/client.dart#L782 ) 中,如果我们将它从 route(url).then((success) {
更改为 new Future.value(true).then( (成功){
然后问题不再发生 - 当然,我们失去了路由提供的所有“预输入”等功能。但似乎在该路由功能的某个地方,出现了问题......
最佳答案
根据 this issue在 Günter 的评论中链接,这已在 0.5.0 中由 this commit 修复.
我无法通过阅读代码理解该提交的哪一部分修复了它;所以希望 0.5 是一个相对兼容的版本,可以升级到!
关于ios - 角 Dart : Route links in Safari on iOS 7 stop working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25714506/