【问题标题】:Links (and clicks) fail to open with Cordova on iOS 8.4.1在 iOS 8.4.1 上使用 Cordova 无法打开链接(和点击)
【发布时间】:2015-11-09 03:39:33
【问题描述】:

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

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

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

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

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

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

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

【问题讨论】:

    标签: javascript ios angularjs cordova ngcordova


    【解决方案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;
                  

                  【讨论】:

                    猜你喜欢
                    • 2018-06-06
                    • 2016-03-29
                    • 1970-01-01
                    • 2020-03-31
                    • 2017-03-04
                    • 2020-12-03
                    • 2022-11-11
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多