在 iOS 8.4.1 上使用 Cordova 无法打开链接（和点击）

Posted 2023-02-19

【中文标题】在 iOS 8.4.1 上使用 Cordova 无法打开链接（和点击）

【英文标题】：Links (and clicks) fail to open with Cordova on iOS 8.4.1

【发布时间】：2015-11-09 03:39:33

【问题描述】：

最新的 ios 版本 (8.4.1) 似乎破坏了我们的 ngCordova 应用程序。

我们的链接通常不会打开，无论是直接通过 href、ng-click 还是 ng-href 访问。有些会在反复点击后打开，并且hrefs有一个弹出菜单，如果我们点击并按住它们一段时间，我们可以选择“打开”、“复制”或“取消”。

问题不区分按钮或标签。一些 a 标签似乎工作得很好。

我们使用的是旧版本的 cordova 和 ngcordova，但更新它们并没有解决这个问题。

我也尝试过禁用用户选择，但这并没有解决问题。

这个问题只发生在设备上，不在模拟器上。

我们为侧边菜单使用可切换的 angular-mobile-ui 指令，当点击侧边菜单中的链接时触发切换事件，但链接不会重定向。

【参考方案1】：

您可以尝试重新安装您的inAppBrowser 插件

【参考方案2】：

我认为我遇到了同样的问题，尽管我认为这与点击事件有关，而不是特别是链接。我的应用没有使用 Angular，只有 jQuery，一些 jQuery 插件..

过境 hammer.js 快速点击 计算器（基思伍德） base64 插件

..还有一些PhoneGap/Cordova插件..

cc.fovea.cordova.purchase 3.10.1“购买” cordova-plugin-console 1.0.0“控制台” cordova-plugin-dialogs 1.0.0“通知” cordova-plugin-inappbrowser 1.0.0“InAppBrowser” cordova-plugin-whitelist 1.0.1-dev "白名单" de.appplant.cordova.plugin.email-composer 0.8.2“EmailComposer” hu.dpal.phonegap.plugins.PinDialog 0.1.3“PinDialog” org.apache.cordova.splashscreen 1.0.0“启动画面” uk.co.ilee.touchid 0.2.0“触控 ID”

我的应用程序上有很多按钮，并且通过这次 iOS 更新仅 (8.4.1)，我发现其中一些有效，而另一些无效。

例如这是停止工作的按钮之一的标记：

<div class="button theme-bg" id="add-budget"><span>Add Budget</span></div>

这是相关的 jQuery：

$('#add-budget').on('click', function (e) 
    // do stuff
);

从 iOS 7.0 到 8.4 都可以正常工作。它只在 8.4.1 中断。

最后，我发现在这个按钮上添加以下 CSS 规则解决了这个问题：

width: 100%;
float: left;
overflow: hidden;

我完全不知道为什么会这样。如果有人能解释原因，那就太好了。我只是通过查看 确实 仍然有效的按钮的 CSS 规则并将它们应用于损坏的按钮来解决这个问题。

无论如何，我希望它也适用于其他人。这是 8.4.1 的一个可怕问题 - 特别是因为这个更新应该只影响 Apple Music！我不得不从所有 App Store 中删除我的应用！

这是应用于我的（正在工作的）按钮的完整规则列表：

.button 
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    display: block;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -0.07em;
    -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.1);
    position: relative;

    /* 3 new rules added to fix the buttons: */
    width: 100%;
    float: left;
    overflow: hidden;

.theme-bg 
    background: #F88319;
    -webkit-transition: background 0.7s;

【讨论】：

我最终通过使用 fastclick 库 github.com/ftlabs/fastclick

解决了它

我的项目已经在使用 fastclick，但问题仍然存在。我这样称呼它：FastClick.attach(document.body);

【参考方案3】：

我在使用 cordova 3.5 版的 ios 项目构建时遇到了同样的问题 当我将 cordova 更新到最新版本 (5.1.1) 并重建项目时，问题得到了解决

我不确定这是根本原因，但它对我来说很好

P/s：我的项目使用 angularjs 和 cordova

【参考方案4】：

我也有同样的问题。在此处查看 Apple 的安全更新日志https://support.apple.com/en-us/HT205030

影响：恶意网站可以使点击事件产生合成 点击另一个页面 描述：如何合成存在问题 点击事件是由点击事件生成的，这些事件可能导致点击目标 其他页面。该问题已通过受限点击得到解决 传播。

我认为问题源于这种变化。

您可以将 touchstart 事件添加到您的点击事件中。这暂时解决了我的问题，直到我找到更好的解决方案。

$('button').on('click touchstart', function()
    // Click event
);

【讨论】：

我们发现了同样的问题——fastclick 为我们解决了问题。

【参考方案5】：

您使用的是 FastClick 库吗？您可以尝试更新到最新版本吗？

我们在 iOS 8.4.1 和 FastClick 0.6.7 版本中遇到了同样的问题。当我们更新到最新版本的 FastClick 库时，问题就解决了。不知道它是如何以及为什么起作用的，但它对我们有用！

【参考方案6】：

我能够通过安装 fastclick 库来解决问题。 FastClick

【讨论】：

也影响了我们的一款使用 FastClick 0.6.11 的应用程序，使用最新版本的 FastClick 解决了

【参考方案7】：

使用最新版本的 FastClick 对我有用。

【参考方案8】：

另一种方法是像这样设置 css 属性（它适用于我）：

button:active  opacity: 1 !important; 

一些我无法理解的非常愚蠢的东西，但我认为它与 Apple 相关，发布于： https://support.apple.com/en-us/HT205030

“影响：恶意网站可以使点击事件产生合成 点击另一个页面 描述：如何合成存在问题 点击事件是由点击事件生成的，这些事件可能导致点击目标 其他页面。该问题已通过受限点击得到解决 传播。”

所以我想如果处于活动状态的按钮设置为低于 1 的不透明度，Apple 应该认为这是合成点击。

【讨论】：

+1 这个修复对我有用。我更新了 fastclick 库并没有发生任何事情，但是将按钮的不透明度设置为 1.0 有效

【参考方案9】：

我可以亲自担保 Fastlink 在我们运行在 Backbone/Marionette 上的应用程序上解决了这个问题。我们实现了它，我们的 javascript 点击事件再次按预期工作，不需要从点击更改为任何触摸方法。我知道这也会影响 CSS 下拉菜单（我们的应用程序没有）。任何人都可以保证上面提到的 CSS hack 可以解决问题吗？

【参考方案10】：

我尝试了上述所有解决方案： - 不透明度：1； = 无影响 - FastClick = 比不工作更糟糕（激活隐藏在 CSS 子菜单下的链接） - 我用 touchStart 事件创建了一个不稳定的解决方法，但这不是一个像样的永久解决方案。我还将测试上面的简短 touchStart 解决方案，但要保持网站超轻量级，所以我什至不使用 JQuery，将不得不重新编写它。 - Fastlink = 我不知道从哪里得到这个 JS

我的菜单是一个简单的纯 CSS 子菜单 .. 根本没有 Javascript。直到现在，因为苹果显然需要它！ （并且关闭 JS 的人无法再浏览该网站。）

但是我仍然没有找到一个好的解决方案，即使使用 JS 来解决 Apple 制造的这个全球网站破坏问题！

有关此主题的更多讨论，请参见 Apple 社区的此帖子：https://discussions.apple.com/message/28790737

【讨论】：

试过这个：a:active opacity: 1 !important;

这种工作，但特定于pureCSSmenu： var lastTouch;函数 touchStart(event) var currentElement = event.target; if(currentElement.parentElement.nodeName == 'LI' && currentElement.className != 'pureCssMenui0') location.href=currentElement.href; if(currentElement.tagName == 'A' && currentElement.className == 'pureCssMenui0') event.preventDefault(); if(currentElement.href != lastTouch) lastTouch = currentElement.href; 其他 location.href=currentElement.href; this.addEventListener("touchstart", touchStart, false);

【参考方案11】：

这对我有用：

a, button  opacity:1 !important; 

THX arzanardi

【参考方案12】：

我在使用 Cordava 4.1.2 和 iOS 8.4.1 时遇到了同样的问题，我解决了更新 FastClick 的问题

【参考方案13】：

我使用 css 解决了同样的问题。我在 css 下面添加了它，它对我有用。

z-index:10000000;