Javascript 检测用户是否正在使用适用于android/iOS的webview或常规浏览器

如何检测用户是否使用android的webview或iOS的浏览页面

stackoverflow上到处都有各种各样的解决方案，但我们还没有针对这两种操作系统的防弹解决方案

目标是一个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网络视图（）：

---

检测android webview，我们有许多解决方案，如和。我不确定该怎么做，因为每个解决方案似乎都有问题

注意：此解决方案基于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';
}

---

检测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
};

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

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

import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);

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

PHP:

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
};

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

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

import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);

JSP:

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
};

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

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

import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);

---

参考：

这是的扩展版本。它可以用于在从浏览器访问网站时显示应用程序安装横幅，以及在webview中打开网站时隐藏横幅

$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";
}

---

对于iOS，我发现您可以通过以下方式可靠地确定您是否处于webview（WKWebView或UIWebView）中：

var isiOSWebview = (navigator.doNotTrack === undefined && navigator.msDoNotTrack === undefined && window.doNotTrack === undefined);

工作原理： 除了iOS上的WebView之外，所有现代浏览器（包括Android上的WebView）似乎都有某种实现。在所有支持doNotTrack的浏览器中，如果用户未提供值，则该值返回为null，而不是未定义-因此，通过检查所有各种实现上的未定义，可以确保您在iOS上的webview中

注意： 这将把iOS上的Chrome、Firefox和Opera识别为网络视图——这不是一个错误。同样，苹果限制iOS上的第三方浏览器开发者使用UIWebView或WKWebView来呈现内容——因此，iOS上的所有浏览器都只是包装标准的WebView，Safari除外

如果您需要知道自己在webview中，但不在第三方浏览器中，您可以通过以下方式识别第三方浏览器：

---

作为对上述答案的补充， 要确定它是否是新版本android上的webview，可以使用以下表达式：

const isWebView=navigator.userAgent.includes（'wv'）

---

有关此代码的详细信息，请参见。

我发现这个简单易用的软件包

总之：

$npm安装是ua webview

Javascript:

var isWebview = require('is-ua-webview');    
var some_variable = isWebview(navigator.userAgent);

角度2+：

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
};

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

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

import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);

如果您使用的是Flask（而不是PHP），那么可以检查“User-Agent”头的字符串中是否有“wv”。可以随意编辑/添加更精确的检查方式，但如果是web视图，则基本上会将“wv”放在那里；否则，它就不存在了

user_agent_header = request.headers.get('User-Agent', None)
is_web_view = "wv" in str(header_request) if user_agent_header is not None else False

---

棒棒糖及以上的WebView UA

在较新版本的WebView中，您可以通过以下方式区分WebView： 查找下面突出显示的wv字段

Mozilla/5.0（Linux；Android 5.1.1；Nexus 5 Build/LMY48B；wv） AppleWebKit/537.36（KHTML，类似Gecko）版本/4.0Chrome/43.0.2357.65 移动Safari/537.36

---

对我来说，这个代码起作用了：

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
  }
};

---

针对这个问题找到的一个简单解决方案是在点击webview时在url中传递一个参数，并检查该参数是否存在，是否来自android或IOS。只有当你有权访问应用程序源代码时，它才起作用。

---

否则，您可以检查请求的用户代理。

我决定，更有效的解决方案不是检测，而是在AppConfig中指定平台

const appConfig = {
   appID: 'com.example.AppName.Web'
   //or
   //appID: 'com.example.AppName.MobileIOS'
   //or
   //appID: 'com.example.AppName.MobileAndroid'
}

---

以下内容也适用于我：（如果您对

$\u服务器['HTTP\u X\u REQUESTED\u WITH']

感到困惑和未定义索引）

---

棒棒糖及以上的WebView UA

在较新版本的WebView中，您可以通过以下方式区分WebView： 查找下面突出显示的wv字段

---

更多详细信息-

应用程序中是否使用了WebView？是的，如您所见：您是否考虑过在WebView中使用自定义用户代理标头来进行区分@Henrik@David8是的，请查看用户代理方法的链接答案及其问题。使用“wv”检查查找webview的谷歌文档不

返回（navigator.userAgent.toLowerCase（）.indexOf（'android'）>-1）无法在.js中工作？您无法区分系统浏览器和webview。啊，我明白了。谢谢你的澄清！尝试使用此选项将类添加到
元素中，以区分safari和safari ios，但它将我的类添加到所有内容中。抱歉@Brendan，无法获取您的信息。您想要实现什么？X-Requested-With标头的可靠性如何？这在任何情况下都会存在吗？听起来有些设备（例如Galaxy S4 Mini（Android 4.2.2））可能不会发送此标题-请参阅。解决方法通常涉及修改应用程序中的现有标题，或添加可由web服务器检查的自定义标题。谢谢兄弟。。。这起作用了<代码>如果（$_服务器['HTTP_X_REQUESTED_WITH']=“com.company.app”）{echo'WebView'；}否则{echo'Not WebView'；}

Safari和Telegrame在用户代理中都包含“Safari”，因此，在iPhone SE和navigator上使用Telegram WebView无法测试此功能。doNotTrack返回了“0”，因此他们最近似乎添加了对的支持doNotTrack@Selo-向消息应用程序发送电报？我的印象是，他们使用Safari View Controller进行链接等。据我所知，在iOS 12中，WebView仍然没有实现doNotTrack。这不是一个好的解决方案，因为任何到其他页面的导航都会丢失querystring参数。这几乎是完美的，但有一个例外。Twitters iOS应用程序中的WebView使用的UA字符串与iOS上的Safari完全相同。有人说使用WebRTC检查有一种解决方法，但t