Javascript 在移动浏览器或 PhoneGap 应用程序之间检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10347539/
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 between a mobile browser or a PhoneGap application
提问by Diogo Cardoso
Is it possible to detect if the user is accessing through the browser or application using JavaScript?
是否可以检测用户是通过浏览器还是使用 JavaScript 的应用程序访问？
I'm developing a hybrid application to several mobile OS through a web page and a PhoneGap application and the goal would be to:
我正在通过网页和 PhoneGap 应用程序为多个移动操作系统开发混合应用程序，目标是：
- Use the same code independently of the deployment target
- Add PhoneGap.js file only when the user agent is an application
- 独立于部署目标使用相同的代码
- 仅当用户代理是应用程序时才添加 PhoneGap.js 文件
采纳答案by EricL
You could check if the current URL contains httpprotocol.
您可以检查当前 URL 是否包含http协议。
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
// PhoneGap application
} else {
// Web page
}
回答by Futur
Quick solution comes to mind is,
想到的快速解决方案是，
onDeviceReady
shall help you. As this JS call is invoked only by the Native bridge (objC or Java), the safari mobile browser will fail to detect this. So your on device app(phone gap) source base will initiate from onDeviceReady.
会帮助你。由于此 JS 调用仅由 Native 桥（objC 或 Java）调用，因此 safari 移动浏览器将无法检测到这一点。因此，您的设备上的应用程序（电话间隙）源库将从onDeviceReady.
And if any of the Phonegap's JS calls like Device.platform or Device.name is NaN or null then its obviously a mobile web call.
如果任何 Phonegap 的 JS 调用（如 Device.platform 或 Device.name）是 NaN 或 null，那么它显然是移动网络调用。
Please check and let me know the results.
请检查并让我知道结果。
回答by Juan Carlos Moreno
I figured out a way to do this and not rely on deviceready events thus, keeping the web codebase intact...
我想出了一种方法来做到这一点，而不是依赖于设备就绪事件，从而保持网络代码库完整......
The current problem with using the built in deviceready event, is that when the page is loaded, you have no way of telling the app: "Hey this is NOT running on an mobile device, there's no need to wait for the device to be ready to start".
当前使用内置 deviceready 事件的问题是，当页面加载时，您无法告诉应用程序：“嘿，这不是在移动设备上运行，无需等待设备准备就绪开始”。
1.- In the native portion of the code, for example for iOS, in MainViewController.m there's a method viewDidLoad, I am sending a javascript variable that I later check for in the web code, if that variable is around, I will wait to start the code for my page until everything is ready (for example, navigator geolocation)
1.- 在代码的本机部分，例如对于 iOS，在 MainViewController.m 中有一个方法 viewDidLoad，我正在发送一个 javascript 变量，稍后我会在 Web 代码中检查该变量，如果该变量在附近，我会等待为我的页面启动代码，直到一切准备就绪（例如，导航器地理定位）
Under MainViewController.m:
在 MainViewController.m 下：
- (void) viewDidLoad
{
[super viewDidLoad];
NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"];
[self.webView stringByEvaluatingJavaScriptFromString:jsString];
}
2.- index.html the code goes like this:
2.- index.html 代码是这样的：
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){;
myApp.run();
}
try{
if(isAppNative!=undefined);
}catch(err){
$(document).ready(function(){
myApp.run();
});
}
回答by Samuli Hakoniemi
PhoneGap has window.PhoneGap (or in Cordova, it's window.cordova or window.Cordova) object set. Check whether that object exists and do the magic.
PhoneGap 有 window.PhoneGap（或在 Cordova 中，它是 window.cordova 或 window.Cordova）对象集。检查该对象是否存在并执行魔术。
回答by Pirokiko
Inside the native call where the url for the phonegap app is loaded you add a parameter target with value phonegap. So the call for android becomes something like this.
在加载 phonegap 应用程序 url 的本机调用中，您添加一个值为 phonegap 的参数目标。所以对 android 的调用就变成了这样。
super.loadUrl("file:///android_asset/www/index.html?target=phonegap");在 javascript 中，我们检查参数是否存在，如果存在，我们为 phonegap/cordova 添加脚本标记。
var urlVars = window.location.href.split('?');
if(urlVars.length > 1 && urlVars[1].search('target=phonegap') != -1){
//phonegap was used for the call
$('head').append('<script src="cordova.js"></script>');
}
A small caveat一个小警告：此方法需要针对每个不同的目标移动平台更改 phonegap 中对 index.html 的调用。对于大多数平台，我不熟悉在哪里执行此操作。回答by sciritai
It sounds like you are loading another webpage once the webview starts in the Phonegap app, is that correct? If that's true then you could add a param to the request url based on configuration.
一旦 webview 在 Phonegap 应用程序中启动，听起来您正在加载另一个网页，对吗？如果这是真的，那么您可以根据配置向请求 url 添加一个参数。
For example, assuming PHP,
例如，假设 PHP，
App.Config = {
target: "phonegap"
};
<body onload="onbodyload()">
var onbodyload = function () {
var target = App.Config.target;
document.location = "/home?target=" + target;
};
Then on the server side, include the phonegap js if the target is phonegap.
然后在服务器端，如果目标是phonegap，则包含phonegap js。
There is no way to detect the difference using the user agent.
使用用户代理无法检测差异。
回答by Aki
I am using the same code for both phonegap app and our web client. Here is the code that I use to detect if phonegap is available:
我对 phonegap 应用程序和我们的网络客户端使用相同的代码。这是我用来检测 phonegap 是否可用的代码：
window.phonegap = false;
$.getScript("cordova-1.7.0.js", function(){
window.phonegap = true;
});
Keep in mind that phonegap js file is loaded asynchronously. You can load it synchronously by setting the correct option of a nifty jquery $.getScript function.
请记住，phonegap js 文件是异步加载的。您可以通过设置漂亮的 jquery $.getScript 函数的正确选项来同步加载它。
Note that approach does make an extra GET request to grab phonegap js file even in your webclient. In my case, it did not affect the performance of my webclient; so it ended up being a nice/clean way to do this.Well at least until someone else finds a quick one-line solution :)
请注意，即使在您的网络客户端中，该方法也会发出额外的 GET 请求以获取 phonegap js 文件。就我而言，它不会影响我的网络客户端的性能；所以它最终成为一种很好/干净的方式来做到这一点。至少直到其他人找到一个快速的单行解决方案:)
回答by B T
The way I'm doing it with is using a global variable that is overwritten by a browser-only version of cordova.js. In your main html file (usually index.html) I have the following scripts that are order-dependent:
我使用的方法是使用一个全局变量，该变量被仅浏览器版本的cordova.js 覆盖。在您的主 html 文件（通常index.html）中，我有以下依赖于顺序的脚本：
<script>
var __cordovaRunningOnBrowser__ = false
</script>
<script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
<script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->
And inside cordova.jsI have simply:
在里面cordova.js我只是：
__cordovaRunningOnBrowser__ = true
When building for a mobile device, the cordova.js will not be used (and instead the platform-specific cordova.js file will be used), so this method has the benefit of being 100% correct regardless of protocols, userAgents, or library variables (which may change). There may be other things I should include in cordova.js, but I don't know what they are yet.
为移动设备构建时，不会使用cordova.js（而是使用特定于平台的cordova.js 文件），因此无论协议、userAgents 或库如何，此方法都具有100% 正确的优点变量（可能会改变）。在cordova.js 中可能还有其他东西我应该包括，但我还不知道它们是什么。
回答by Havihavi
Ive ben struggling with this aswell, and i know this is an old thread, but i havent seen my approach anywhere, so thought id share incase itll help someone.
我也一直在努力解决这个问题，我知道这是一个旧线程，但我还没有在任何地方看到我的方法，所以我想 id 分享 incase itll 帮助某人。
i set a custom useragent after the actual useragent :
我在实际用户代理之后设置了一个自定义用户代理：
String useragent = settings.getUserAgentString();
settings.setUserAgentString(useragent + ";phonegap");
that just adds the phonegap string so other sites relying on detecting your mobile useragent still works.
这只是添加了 phonegap 字符串，因此依赖检测您的移动用户代理的其他站点仍然有效。
Then you can load phonegap like this:
然后你可以像这样加载 phonegap：
if( /phonegap/i.test(navigator.userAgent) )
{
//you are on a phonegap app, $getScript etc
} else {
alert("not phonegap");
}
回答by user3415370
what if you try following :
如果您尝试以下操作怎么办：
if(window._cordovaNative) {
alert("loading cordova");
requirejs(["...path/to/cordova.js"], function () {
alert("Finished loading cordova");
});
}
