使用 jQuery 打开一个链接会打开相关的应用程序，但是，继续此操作，会打开一个烦人的 about:blank 页面。我怎样才能阻止这个？答案

【问题标题】：Opening a link with jQuery opens the relevant app but, proceeding this, an annoying about:blank page is opened. How can I stop this?使用 jQuery 打开一个链接会打开相关的应用程序，但是，继续此操作，会打开一个烦人的 about:blank 页面。我怎样才能阻止这个？
【发布时间】：2018-11-30 01:27:07
【问题描述】：

（在 chrome 中，在 iOS 上）

所需的行为如下：

如果用户的 iOS 设备上没有该应用，该链接将在新标签页中打开
如果用户确实安装了相应的应用程序，则会打开它，同时不会打开 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

【问题讨论】：

标签： javascript jquery ios google-chrome hyperlink

【解决方案1】：

我设法解决了这个问题……（TL；DR at bottom）

背景

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

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

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

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

最终，我意识到 HTML 链接（属于种类）在移动浏览器中的处理方式与使用纯 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;DR

由于 HTML 链接和 JavaScript 链接的跟踪方式不同，我最终使用 JavaScript 点击了一个不可见的 HTML 链接

【讨论】：