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

【问题标题】：How open default browser from instagram in-app browser page link?如何从 instagram 应用内浏览器页面链接打开默认浏览器？
【发布时间】：2021-09-16 08:53:06
【问题描述】：

我网站中的某些页面具有 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

尝试使用 URIs 方案来强制打开浏览器，但不幸的是它似乎不是一个好的解决方案。 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;
});

【问题讨论】：

嗨，Arivan，你有解决方案吗？我也有类似的问题。
@tiakham 很遗憾没有，但我们做了一个解决方法：当 Instagram 用户登陆我们的网站时，我们会显示一个弹出窗口，告诉他在本机浏览器中打开该网站。
这对你有用:) 我的问题是 Facebook 应用内浏览器在点击广告时无法打开我们的网站。我们生活的这个问题只发生在 ios 版本 14.7.1 中，甚至没有发生在旧版本中。我想处理它以强制它使用默认浏览器，但据我所知，这可能并不容易。我试图解决您所做的问题，但网站直接显示错误，并且我放置错误消息的链接无法重定向。谢谢，继续搜索：）

标签： javascript html cross-browser instagram

【解决方案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 的解决方案，我会更新我的答案。

【讨论】：