Javascript 检测用户是否使用 webview for android/iOS 或常规浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37591279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if user is using webview for android/iOS or a regular browser
提问by Henrik Petterson
How to detect if the user is browsing the page using webviewfor androidor iOS?
如何检测用户是否正在使用webviewfor android或iOS浏览页面？
There are varioussolutions posted all over stackoverflow, but we don't have a bulletproof solution yet for both OS.
有不同的解决方案，贴遍计算器，但我们没有一个防弹解决方案还为两个操作系统。
The aim is an if statement, example:
目标是一个 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!');
}
What I've tried so far
到目前为止我尝试过的
Detect iOS webview(source):
检测 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;
}
}
Detect android webview, we have a number of solutions like thisand this. I'm not sure what's the appropriate way to go because every solution seems to have a problem.
采纳答案by Avijit
Detecting browser for iOS devices is different from the Android one. For iOS devices you can do it by checking user agent using JavaScript:
检测 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
};
For Android devices, you need to do it through server side coding to check for a request header.
对于 Android 设备，您需要通过服务器端编码来检查请求标头。
PHP:
PHP：
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "your.app.id") {
//webview
} else {
//browser
}
JSP:
JSP：
if ("your.app.id".equals(req.getHeader("X-Requested-With")) ){
//webview
} else {
//browser
}
回答by rhavendc
Note:This solution is PHP-based. HTTPheaders can be faked so this is not the nicest solution but you can have a start with this.
注意：此解决方案基于 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';
}
回答by U?ur T?l?ko?lu
This is the extended version of rhavendc's answer. It can be used for showing app install banner when a website is visited from browser, and hiding the banner when a website is opened in a webview.
这是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";
}
回答by Everton Miranda De Oliveira
Complementing the above answers, to find out if it's webview on newer versions of android, you can use the expression below:
补充上述答案，要了解它是否是较新版本的 android 上的 webview，您可以使用以下表达式：
const isWebView = navigator.userAgent.includes ('wv')
const isWebView = navigator.userAgent.includes ('wv')
See details of this code at https://developer.chrome.com/multidevice/user-agent#webview_user_agent.
在https://developer.chrome.com/multidevice/user-agent#webview_user_agent 上查看此代码的详细信息。
回答by Barna Tekse
For me this code worked:
对我来说，这段代码有效：
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
}
};
回答by Manoj De Mel
I found this simple-to-use package is-ua-webview
我发现这个简单易用的包是-ua-webview
intall: $ npm install is-ua-webview
安装： $ npm install is-ua-webview
Javascript:
Javascript：
var isWebview = require('is-ua-webview');
var some_variable = isWebview(navigator.userAgent);
Angular2+:
角2+：
import * as isWebview from 'is-ua-webview';
const some_variable = isWebview(navigator.userAgent);
回答by Josh Wolff
If you're using Flask (and not PHP), you can check to see if "wv" is in the string for the "User-Agent" header. Feel free to edit / add a more precise way of checking it, but basically "wv" is put there if it's a web view; otherwise, it is not there.
如果您使用 Flask（而不是 PHP），您可以检查“wv”是否在“User-Agent”标头的字符串中。随意编辑/添加更精确的检查方式，但如果它是网络视图，基本上“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 in Lollipop and Above
In the newer versions of WebView, you can differentiate the WebView by looking for the wv field as highlighted below.
Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 MobileSafari/537.36
Lollipop 及更高版本中的 WebView UA
在较新版本的 WebView 中，您可以通过查找下面突出显示的 wv 字段来区分 WebView。
Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 MobileSafari/537.36
回答by zaffudo
For iOS I've found that you can reliably identify if you're in a webview (WKWebView or UIWebView) with the following:
对于 iOS，我发现您可以通过以下方式可靠地确定您是否在 webview（WKWebView 或 UIWebView）中：
var isiOSWebview = (navigator.doNotTrack === undefined && navigator.msDoNotTrack === undefined && window.doNotTrack === undefined);
Why it works:All modern browsers (including webviews on Android) seem to have some sort of implementation of doNotTrackexcept webviews on iOS. In all browsers that support doNotTrack, if the user has not provided a value, the value returns as null, rather than undefined - so by checking for undefined on all the various implementations, you ensure you're in a webview on iOS.
工作原理：所有现代浏览器（包括 Android 上的 webviews）似乎都有某种doNotTrack实现，除了 iOS 上的webviews。在所有支持 doNotTrack 的浏览器中，如果用户未提供值，则该值返回为 null，而不是 undefined - 因此，通过在所有各种实现中检查 undefined，您可以确保您处于 iOS 上的 webview 中。
Note:This will identify Chrome, Firefox, & Opera on iOS as being a webview - that is not a mistake. As notedin variousplaces online, Apple restricts 3rd party browser developers on iOS to UIWebView or WKWebView for rendering content - so all browsers on iOS are just wrapping standard webviews except Safari.
注意：这会将 iOS 上的 Chrome、Firefox 和 Opera 识别为 web 视图 - 这不是错误。正如在网上的各个地方所指出的那样，Apple 将 iOS 上的 3rd 方浏览器开发人员限制为 UIWebView 或 WKWebView 来呈现内容 - 所以 iOS 上的所有浏览器都只是包装了标准的 webview，除了 Safari。
If you need to know you're in a webview, but not in a 3rd party browser, you can identify the 3rd party browsers by their respectiveuseragents:
如果您需要知道自己在 webview 中，而不是在 3rd 方浏览器中，则可以通过其各自的用户代理识别 3rd 方浏览器：
(isiOSWebview && !(/CriOS/).test(navigator.userAgent) && !(/FxiOS/).test(navigator.userAgent) && !(/OPiOS/).test(navigator.userAgent)
