电话锚链接不适用于 jqtouch 和 phonegap答案

【问题标题】：tel anchor link not working with jqtouch and phonegap电话锚链接不适用于 jqtouch 和 phonegap
【发布时间】：2011-11-15 12:30:26
【问题描述】：

我将 phonegap 与 jqtouch 一起使用，并试图非常简单地打开手机的本机手机应用程序并提示呼叫。我已经尝试了以下各种变化：

<a href="tel:[NUMBER]" class="greenButton>Call number</a>

我试过 rel="external"

我尝试过使用 href="tel://"

我试过 target="_blank"

我试过 target="_webapp"

我什至尝试添加 class="tel" 并使用 jQuery 调用 $(location).attr('href',this.href);

基本上，jqtouch必须拦截链接才能做到这一点，我不知道如何让它正常做事！

我发现了一些奇怪的东西......
如果我将链接包装在 iscroll 包装器中，它就可以工作。

<div class="s-scrollwrapper">
<a href="tel:[NUMBER]" class="greenButton">Call number</a>
</div>

我显然不想满足于此，因为它搞砸了格式并使按钮可滚动并且毫无意义。谁能帮帮我？

【问题讨论】：

标签： cordova anchor jqtouch iscroll4

【解决方案1】：

在我的情况下，我通过添加以下选项设法解决了 iScroll 的问题：

  var options = {
    //other options
    onBeforeScrollStart: function (e) {
      var target = e.target;
      while (target.nodeType != 1) target = target.parentNode;
      if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A') e.preventDefault();
    }
  };
  var myScroll = new iScroll(wrap, options);

【讨论】：

【解决方案2】：

我试过了：

<a href="tel:[NUMBER]" rel="external" target="_webapp">Call number</a>

...效果很好。

可能它同时需要rel="external"（阻止它尝试AJAX链接）和target="_webapp"，这样它就不会尝试打开Safari来处理链接。

【讨论】：

我一直在尝试一些东西，发现我可以轻松地使用 mailto 和 sms 链接，并且在 iphone 上测试时它们工作正常。但我似乎仍然无法得到电话：工作。这可能是phonegap中的设置吗？这似乎没有意义！
不确定...可能是 jQTouch 中的错误。我正在使用 DataZombies fork：github.com/DataZombies/jQTouch
这也是我正在使用的，它仍然没有做任何事情！您是否也在使用 initListIndices() 调用。这与 s-scrollwrapper 相关联，因此很高兴知道您是否也在使用 datazombies fork 的此扩展。我最近在显示来自远程源的图像时遇到了问题，不得不编辑 phonegap.plist 文件以添加外部主机。您是否认为可能需要进行更改才能使 tel 链接正常工作？

【解决方案3】：

这确实是 jqtouch 拦截点击事件并阻止默认行为的方式。我最终“修复”它的方式是使用调用按钮在页面上的内容周围放置一个“s-scrollwrapper”div。无论如何，我都需要为应用程序的所有屏幕执行此操作，但对于这个 datazombies fork，它可能需要更好的方法来实现 tel 链接。

【讨论】：

【解决方案4】：

您需要在 iOS 上使用target="_system" 才能使tel: 链接起作用。

【讨论】：

我刚刚发现的一个重要提示可能会对遇到此问题的人有所帮助，那就是在 iOS 上，href 中的值不能有任何格式，例如空格或括号 (例如区号）。例如，它应该是 18005558888，而不是 1800 555 888。

【解决方案5】：

如果有人遇到同样的问题，您可以尝试高级选项部分中的选项preventDefaultExceptionhttp://iscrolljs.com/#advanced-options

来自 iScroll 5 文档：

options.preventDefaultException

当preventDefault() 被触发时，这些都是例外情况无论如何，尽管 preventDefault 选项值。这是一个漂亮的强大的选项，如果你不想preventDefault() 例如，具有表单字段类名称的元素，您可以传递以下：
preventDefaultException: { className: /(^|\s)formfield(\s|$)/ }
默认值：{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }。

所以你可以在 tagName 值中添加一个 A 标签： { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }

【讨论】：