使用 jQTouch 时，我无法从 Mobile Safari 获取用于打开邮件应用程序的 mailto 链接。可能出什么问题了？

Question

我正在使用 jQTouch 开发 iPhone Web 应用程序，它包含一个简单的 mailto: 链接到有效的电子邮件地址，点击该地址后应该会启动 iPhone 邮件应用程序，但事实并非如此。

如果我在 Mobile Safari 中访问包含完全相同链接的“正常”网页，然后点击它，我会得到预期的结果：邮件应用程序会弹出，并在“收件人”字段中显示正确的电子邮件地址。

这是链接 HTML（地址已更改），以防万一我发疯并犯了一个愚蠢的错误，但它看起来完全没问题：

<p><a href="mailto:[email protected]">[email protected]</a></p>

有人在使用 jQTouch 时遇到过这个吗？或者有人至少可以建议一种我可以调试这个的方法吗？当我点击非工作链接时，它会闪烁红色（活动链接状态），并且绝对不会发生其他情况。

Answer 1

我再次查看了 jQTouch 演示包中的示例代码，发现他们在电子邮件链接中添加了 target="_blank" 属性。

我对我的链接执行了此操作，它开始工作（弹出邮件客户端窗口）。但是，标准网页中的链接也可以工作，但是没有 target="_blank" 属性...

我很困惑，但添加该属性似乎如果您的移动页面使用jQTouch，可以解决此问题。

Answer 2

只要使用 target="_blank" 就可以正常工作。

对于那些觉得每次点击mailto或tel链接时都会弹出“这将在新页面中打开”的烦人的人（像我一样），您可以这样做编辑

jqtouch.js 并转到第 284 行：

if ($el.attr('target') == '_blank' || $el.attr('rel') == 'external')

现在将此行替换为：

if ($el.attr('target') == '_self' || $el.attr('target') == '_blank' || $el.attr('rel') == 'external')

在 HTML 上（例如）：

<a href="tel:+351912345678">Call me</a>

变为

<a target="_self" href="tel:+351912345678">Call me</a>

Answer 3

很棒的发现，我也在做同样的事情，直到最近才明白为什么。如果您查看 jqtouch.js rev 109 中的第 161 行和第 284 行，您会发现目标属性“_Blank”将阻止 jqtouch 劫持您的点击事件。它拦截事件，因为这是从一个页面移动到另一个页面的主要机制。

Answer 4

这与 jQTouch 无关，但 mailto: 链接对我也不起作用，要修复它们，我所要做的就是在冒号后添加斜杠。

mailto://[电子邮件受保护]

已收到在这里执行此操作的想法：http://mobiledevelopertips。 com/cocoa/launching-other-apps-within-an-iphone-application.html。奇怪的是，电话连接对我来说工作得很好，没有斜线。

Answer 5

我发现向链接添加 target="_blank" 是有效的 - 除了在某些桌面浏览器上，它会打开一个新的空白窗口并打开电子邮件窗口。诚然，jqtouch 网站通常不会在桌面浏览器上查看，但我不喜欢这种行为。

相反，这就是我所做的：

• 将 mailto: 链接放入 onclick 事件中，并添加 return false （所以到 # 的实际链接不会触发）
• 向链接添加了 noHighlight 类

这是一个示例：

<a href="#" onclick="window.location='mailto:[email protected]'; return false;" class="noHighlight">Email me</a>

然后我修改了主题中的 CSS文件。

之前：

ul li a.active {
   background: #194fdb url(img/selection.png) 0 0 repeat-x;
   color: #fff;
}

之后：

ul li a.active:not(.noHighlight) {
   background: #194fdb url(img/selection.png) 0 0 repeat-x;
   color: #fff;
}

我添加 noHighlight 类的原因是，如果没有它，按钮将突出显示并“粘住”，这使得按钮看起来仍然处于某种活动状态。为了解决这个问题，我添加了该类并修改了 CSS，如上所述。

CSS 更改的作用是，如果链接（在 li 内部，又在 ul 内部）具有类 noHighlight，它将不要更改背景或文本颜色。

现在似乎在桌面和移动浏览器上都运行得很好。