ios - 角 Dart : Route links in Safari on iOS 7 stop working

标签 ios iphone safari dart angular-dart

我已经为此烦恼了一个多星期了......

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/

相关文章:

ios - 当 UIScrollView 滚动第一响应者查看时,如何修复 iOS 14 中的错误行为?

ios - 对于 google firebase 动态链接,预览页面为 (erf=1),即使安装了应用程序,该链接也会始终将您重定向到应用程序商店

iphone - 从付费应用程序切换到具有自动续订订阅的免费应用程序

javascript - 在 iPad 中创建水平滚动(使用 Hammer JS 库防止垂直滚动)

css - 简单的 CSS 但在 Chrome 31 和 Safari 6 中的外观完全不同

ios - UIStepper 值已更改。

ios - 缺少必需的图标文件。该 bundle 不包含 iPhone/iPod Touch 的应用程序图标,正好是 '120x120' 像素

ios - 我的申请会在一年后消失吗?

iphone - RTSPPlay 不运行

Safari 中的 javascript 页面刷新