如何从 Instagram 应用内浏览器页面链接打开默认浏览器？

Question

我网站中的某些页面具有 PWA 安装功能（Instagram 应用内浏览器不支持）。因此，当我的访问者点击这些页面链接时，我想在本机浏览器中打开它，而不是在 Instagram 应用内浏览器中保留导航。

我尝试了以下方法：

$('.my-link').on('click', function(evt){
    if(navigator.userAgent.includes("Instagram")){
      evt.preventDefault();
      window.open($(this).attr('href'), '_blank');
      return false;
    }

    return true;
});  

if 条件匹配 true，但目标页面仍会在 Instagram 应用内浏览器中打开。我也尝试过 window.open($(this).attr('href'), '_system');，但没有成功。

有什么线索吗？

更新1

尝试使用 URI 方案强制打开浏览器，但不幸的是这似乎不是一个好的解决方案。 Safari 没有 URI 方案。 Google Chrome 可以，但我们不能保证用户在 Android 中拥有 Chrome 浏览器，并且我们无法检测用户拥有什么浏览器。

$('a.new-window-if-instagram').on('click', function(evt){
    if(navigator.userAgent.includes("Instagram")){
      
      if (/android/i.test(navigator.userAgent)) {
        evt.preventDefault();

        var url = $(this).attr('href').replace("https://", "googlechromes://");
        url = url.replace("http://", "googlechrome://");
        window.open(url, '_blank');

        return false;
      }

      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        // Safari doest have URI scheme...
      }
    }

    return true;
}); 

Answer 1

我目前遇到了同样的问题，但至少我找到了适用于 Android 的可行解决方案。我不知道您是否使用 PHP 作为后端语言，但如果其他人发现了这一点，这可能会有用：

<?php

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if ((strpos($ua, 'mobile/') !== false) && (strpos($ua, 'safari/') == false)) // Validation code for iOS mobile
{
    // Show a message that ask user to open with default browser
}
else if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])) // Validation code for Android mobile
{
    header('Content-type: application/pdf');
    header('Content-Transfer-Encoding: binary');
    header('Accept-Ranges: bytes');
}

这是针对 iOS 应用内浏览器和 Android 应用内浏览器的验证。

对于Android：我们将页面的内容类型更改为PDF。由于应用内浏览器无法处理 PDF 文件，因此它将在真实浏览器（用户设置中定义的默认浏览器）中打开页面。当页面再次加载时，验证将失败，因为它不再是应用内浏览器。

对于 iOS：由于我们可以在 iOS 中验证应用内浏览器，但无法自动重定向用户，所以我现在要做的是显示一条消息，要求用户使用默认浏览器打开此页面（您可以使用

User-Agent

上的开关盒更改消息，因为每个应用内浏览器的步骤都不相同）

如果我找到适用于 iOS 的可行解决方案，我会更新我的答案。

Answer 2

我找到了一种解决方法来逃避 iOS 版 Instagram 应用内浏览器。我的策略主要是检查它们是否在 Instagram 应用内浏览器中，如果是，则显示警报/警告模式，表明我们的网站无法在 Instagram 浏览器中运行。

然后遵循这个要点： https://github.com/shalanah/inapp-debugger/pull/2

我的模式中有一个按钮，如果它们在 iOS 和 Instagram 上，则使用快捷方案链接呈现锚链接。它适用于我的情况。

然后对于 Android，我进行了类似的检查，并使用此处显示的策略进行链接：https://medium.com/@romaia/i-came-up-with-a-similar-solution-that-is-to -使用a标签的下载属性13f642005a94

更多有用信息来源：https://frontendmasters.com/blog/the-pitfalls-of-in-app-browsers/