电话锚点链接不适用于 jqtouch 和 PhoneGap

发布于 2024-12-15 15:07:24 字数 673 浏览 4 评论 0原文

我将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>

我显然不想解决这个问题，因为它会搞乱格式并使按钮可滚动并且毫无意义。有人可以帮我吗？

原文

I'm using phonegap with jqtouch and am trying to very simply open the phone's native phone app and prompt a call. I've tried all sorts of variations on the following:

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

I've tried rel="external"

I've tried using href="tel://"

I've tried target="_blank"

I've tried target="_webapp"

I've even tried adding class="tel" and using jQuery to call $(location).attr('href',this.href);

Basically, jqtouch must be intercepting links to do it's thing and I can't figure out how to make it do things normally!

I've found something odd however...
If I wrap the link in an iscroll wrapper it works.

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

I obviously don't want to settle for this because it screws up formatting and makes the button scrollable and is pointless. Can anyone help me please?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安穩 2024-12-22 15:07:24

就我而言，这是 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);

In my case it was a problem with iScroll that I have managed to solve by adding the following option:

  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);

回复收藏 0 原文

三岁铭 2024-12-22 15:07:24

我尝试过：

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

……效果很好。

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

I tried:

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

...and it worked fine.

Could be that it needs both the rel="external" (to stop it from trying to AJAX the link) AND target="_webapp" so that it doesn't try to open Safari to handle the link.

回复收藏 0 原文

○愚か者の日 2024-12-22 15:07:24

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

回复收藏 0 原文

倒数 2024-12-22 15:07:24

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

回复收藏 0 原文

冷弦 2024-12-22 15:07:24

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

来自 iScroll 5 文档：

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

因此，您只需将 A 标签添加到 tagName 值即可：
{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }

If someone has the same issue, you can try the option preventDefaultException in the section Advanced options http://iscrolljs.com/#advanced-options

From iScroll 5 docs:

options.preventDefaultException
These are all the exceptions when preventDefault() would be fired
anyway despite the preventDefault option value. This is a pretty
powerful option, if you don't want to preventDefault() on all
elements with formfield class name for example, you could pass the
following:
preventDefaultException: { className: /(^|\s)formfield(\s|$)/ }
Default: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }.

So you can just add an A tag to the tagName value:
{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }

回复收藏 0 原文

~没有更多了~