0

（在 chrome 中，在 iOS 上）

所需的行为如下：

  1. 如果用户的 iOS 设备上没有该应用程序，该链接将在新选项卡中打开
  2. 如果用户确实安装了相应的应用程序，则会打开相应的应用程序，而无需打开 about:blank 页面

我尝试了以下方法：

window.open('link', '_blank'); // Opens app as desired but also about:blank

window.open('link'); // Opens app as desired but also about:blank

window.location = 'link'; // Opens app as desired with no about:blank page as
                          // desired BUT if the user doesn't have the app, it will
                          // open the link in the current window
4

1 回答 1

0

我设法解决了这个问题...... （TL;底部的DR）

背景

本质上，我有一个链接，当用户将鼠标悬停在它上面时，它会执行一个简短的 JavaScript 动画。

如果用户在悬停动画完成之前点击了链接，链接会立即打开，因此 Chrome iOS 拍摄的快照是不正确的。Chrome iOS 在浏览打开的标签时显示的快照需要在动画完成后完成，这样返回页面时的重置动画才不会生涩。

这意味着在跟随链接之前动画完成时需要发生短暂的（250 毫秒）暂停，这在纯 HTML 中无法完成（据我所知）；它需要 JavaScript。

因此，在延迟后使用 JavaScript 打开链接时，我遇到了上述问题。以 Instagram 的链接为例。如果用户的手机上没有 Instagram 应用程序，那么使用 JavaScript，链接将简单地在新选项卡中打开（这很好）。如果用户有Instagram 应用程序，打开 Instagram 链接的 JavaScript 调用将首先打开 about:blank 页面，然后打开 Instagram 应用程序。这会在 Chrome iOS 中留下一个打开的 about:blank 页面，这很混乱。

最终，我意识到 HTML 链接（属于 <a href = '...'></a> 种类）在移动浏览器中的处理方式与使用纯 JavaScript 不同。HTML 链接按预期工作，但需要注意的是，在纯 HTML 中，您不能在链接打开之前插入延迟。

解决方案

解决方案是通过以下方式创建许多不可见的 HTML 链接

//HTML
<a href="https://www.instagram.com/xxxx/" id="aInstagram" target="_blank"></a>

在 JavaScript 中，您可以通过它的 ID 获取该链接，并在延迟后对其调用 click()，就像用户拥有一样。

// JavaScript
function instagramClicked() {
    setTimeout(function() {
        document.getElementById('aInstagram').click();
    }, 250);
}

这提供了所需的行为：用户单击 Instagram 图标，并且在延迟后，如果安装了 Instagram 应用程序，则会打开该应用程序，如果未安装，则会在新选项卡中打开链接。

TL;博士

由于 HTML 链接和 JavaScript 链接的遵循方式不同，我最终使用 JavaScript 在延迟后单击了一个不可见的 HTML 链接

于 2018-06-21T02:36:32.347 回答