【发布时间】:2020-03-02 03:59:12
【问题描述】:
问题:
带有 sms: 和 mailto: 链接的网页在 ios 移动 safari 浏览器上失败。单击链接会将您重定向到:
Safari 无法打开页面,因为它无法重定向到位置 以“短信:”开头
或
Safari 无法打开页面,因为它无法重定向到位置 以“mailto:”开头
直到大约两三个月前,这些都可以正常工作。现在这些在使用 Safari 浏览器的 Apple 移动设备上失败了。
背景:
- 我为基于活动的团队创建响应式网页。我们所做的其中一件事是提供团队名册。该名册包括电话号码、SMS 文本页面和电子邮件的链接。
- 为简单起见,我们使用简单的网页。
- 出于安全和隐私考虑,此内容仅在登录后通过 node.js 服务器通过 ajax 调用提供。我们使用单个 node.js Express 服务器来托管网站内容并管理 http/api 调用。
- 通常,单击链接会将移动设备推送到相应的本地应用程序中,以便拨打电话、SMS 短信或电子邮件。
- 这几年在所有设备上都运行良好。
- 最近我们在 iPhone 上看到了这个问题......但是......
- 这是真正奇怪的部分。我有三支球队使用这种技术。失败只是三支球队中的两支。短信链接在那里工作得很好。
- “电话:”链接在所有设备上都能正常工作。
- 失败仅发生在三个站点中的两个上,用于 sms: 和 mailto: 在 iphone 上。在 Android 设备、Windows 和 MacOS 上一切正常。问题出在 Apple 移动设备上。
- 出现故障的两个站点是 Progressive Web Apps,带有 manifest.json 文件和 service_worker.js。运行良好的网站都没有。当我删除清单并关闭服务人员时,没有任何改善。
- 所有三个站点都通过 Google Cloud 上的 App 引擎托管。失败的两个站点仅使用 web_app.appspot.com 寻址。运行良好的网站使用真实的 URL,指向应用引擎的位置。
典型代码:
<li>
<div class="userName">Jane Doe</div>
<div class="phoneNumber"><a href="tel:+1321-555-1234">321-555-1234</a></div>
<div class="sms"><a href="sms:+1321-555-1234"><img src="../images/crosstxt-icon.jpg"></a></div>
<div class="email"><a href="mailto:jane.doe@yahoo.com"><img src="../images/email-icon.png"></a></div>
</li>
如果您在 Apple 移动设备的浏览器中打开它,我想知道这是否会显示问题:
<a href="sms:+1321-555-1234">Click here to create a SMS message.</a>
<br>
<a href="mailto:jane.doe@not_a_real_email_service.com">Click here to create an email message.</a>
显然这是失败的。你甚至看不到我的移动设备上的运行 sn-p 按钮。
【问题讨论】:
-
嗯,不确定您的代码或此处的 sn-p 编辑器是怎么回事,但this 适用于 iPad 和 iPhone 上的邮件和短信
-
哇。我在那个编辑器上尝试了一个简单的
href="sms:...链接,没有添加target="_top"。不去你的 tryit 工具。短信和电子邮件链接在那个网站上都很好用,但只有target="_top"我尝试将它添加到我现有的在线网站,但失败了。我通过 iphone 上的 Safari Remote Inspector 确认了正确的代码添加。不知道发生了什么。仍然看到cannot open page错误。感谢分享target=...的信息。 Reference -
看看我在这里尝试过的东西 - 讨厌网络应用模式...stackoverflow.com/questions/59256976/…
标签: html ios hyperlink mobile-safari ios-universal-links