检测用户是否使用 webview for android/iOS 或常规浏览器

IT技术 javascript jquery
2021-02-06 07:59:42

如何检测用户是否正在使用webview for android或iOS浏览页面？

有不同的解决方案，贴遍计算器，但我们没有一个防弹解决方案还为两个操作系统。

目标是一个 if 语句，例如：

if (android_webview) {
    jQuery().text('Welcome webview android user');
} else if (ios_webview) {
    jQuery().text('Welcome webview iOS user');
} else if (ios_without_webview) {
    // iOS user who's running safari, chrome, firefox etc
    jQuery().text('install our iOS app!');
} else if (android_without_webview) {
    // android user who's running safari, chrome, firefox etc
    jQuery().text('install our android app!');
}

到目前为止我尝试过的

检测 iOS 网页视图（来源）：

if (navigator.platform.substr(0,2) === 'iP'){

  // iOS (iPhone, iPod, iPad)
  ios_without_webview = true;

  if (window.indexedDB) {
    // WKWebView
    ios_without_webview = false; 
    ios_webview = true; 
  }

}

检测机器人的WebView，我们有一些像解决方案的这个和这个。我不确定什么是合适的方法，因为每个解决方案似乎都有问题。

6个回答

检测 iOS 设备的浏览器与 Android 不同。对于 iOS 设备，您可以通过使用JavaScript检查用户代理来实现：

var userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
    if ( safari ) {
        //browser
    } else if ( !safari ) {
        //webview
    };
} else {
    //not iOS
};

对于 Android 设备，您需要通过服务器端编码来检查请求标头。

PHP：

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "your.app.id") {
    //webview
} else {
    //browser
}

JSP：

if ("your.app.id".equals(req.getHeader("X-Requested-With")) ){
    //webview
} else {
    //browser
}

参考：通过 javascript 检测 ipad/iphone webview

@lokiloq 那么你不需要your.app.id. 您可以检查window.navigator.userAgent它是否是 iPhone/Android 以及哪个浏览器。谢谢！
2021-03-19 07:59:42
您无法区分系统浏览器和 webview。
2021-03-24 07:59:42
尝试使用它向<html>元素添加一个类以区分 safari 和 safari ios，但它将我的类添加到所有内容中。
2021-04-02 07:59:42
啊我明白了。谢谢澄清！
2021-04-10 07:59:42
return (navigator.userAgent.toLowerCase().indexOf('android') > -1);在 .js 中不起作用？
2021-04-13 07:59:42

注意：此解决方案基于 PHP。HTTP标头可以伪造，所以这不是最好的解决方案，但您可以从这个开始。

//For iOS

if ((strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile/') !== false) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari/') == false) {
    echo 'WebView';
} else{
    echo 'Not WebView';
}

//For Android

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app") {
    echo 'WebView';
} else{
    echo 'Not WebView';
}
谢谢兄弟...这是工作.... if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app") { echo 'WebView'; } else{ echo 'Not WebView'; }
2021-03-18 07:59:42
Safari 和 Telegram 在用户代理中都包含“safari”，所以这不起作用
2021-03-27 07:59:42
X-Requested-With 标头的可靠性如何？这在任何情况下都会存在吗？
2021-03-29 07:59:42
听起来某些设备（例如 Galaxy S4 Mini（Android 4.2.2））可能不会发送此标头 - 请参阅stackoverflow.com/questions/24291315/...。变通方法通常涉及修改应用程序中的现有标头，或添加可由您的 Web 服务器检查的自定义标头。
2021-03-29 07:59:42

这是rhavendc's answer的扩展版本。它可用于在从浏览器访问网站时显示应用安装横幅，并在网页视图中打开网站时隐藏横幅。

$iPhoneBrowser  = stripos($_SERVER['HTTP_USER_AGENT'], "iPhone");
$iPadBrowser    = stripos($_SERVER['HTTP_USER_AGENT'], "iPad");
$AndroidBrowser = stripos($_SERVER['HTTP_USER_AGENT'], "Android");
$AndroidApp = $_SERVER['HTTP_X_REQUESTED_WITH'] == "com.company.app";
$iOSApp = (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile/') !== false) && (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari/') == false);

if ($AndroidApp) {
    echo "This is Android application, DONT SHOW BANNER";
}
else if ($AndroidBrowser) {
    echo "This is Android browser, show Android app banner";
}
else if ($iOSApp) {
    echo "This is iOS application, DONT SHOW BANNER";
}
else if($iPhoneBrowser || $iPadBrowser) {
    echo "This is iOS browser, show iOS app banner";
}

对我来说，这段代码有效： 

var standalone = window.navigator.standalone,
  userAgent = window.navigator.userAgent.toLowerCase(),
  safari = /safari/.test(userAgent),
  ios = /iphone|ipod|ipad/.test(userAgent);

if (ios) {
  if (!standalone && safari) {
    // Safari
  } else if (!standalone && !safari) {
    // iOS webview
  };
} else {
  if (userAgent.includes('wv')) {
    // Android webview
  } else {
    // Chrome
  }
};
这几乎是完美的，但有一个例外。Twitters iOS 应用程序中的 WebView 使用与 iOS 上的 Safari 完全相同的 UA 字符串。有人说有一种使用 WebRTC 检查的解决方法，但这似乎也失败了。所以就目前而言，没有办法区分 Twitter In-App Browser 和实际的 iOS Safari。leemartin.medium.com/…
2021-04-14 07:59:42

补充上述答案，要了解它是否是较新版本的 android 上的 webview，您可以使用以下表达式：

const isWebView = navigator.userAgent.includes ('wv')

在https://developer.chrome.com/multidevice/user-agent#webview_user_agent 上查看此代码的详细信息。

其它你可能感兴趣的问题
上一篇Javascript 事件 e.which？ 下一篇我可以覆盖 Javascript Function 对象来记录所有函数调用吗？