在移动浏览器或PhoneGap应用程序之间进行检测

是否有可能检测到用户是否通过浏览器或使用JavaScript的应用程序访问?

我正在通过一个网页和一个PhoneGap应用程序开发一个混合应用程序到几个移动操作系统,目标是:

  1. 独立于部署目标使用相同的代码
  2. 仅当用户代理是应用程序时才添加PhoneGap.js文件

您可以检查当前的URL是否包含http协议。

 var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; if ( app ) { // PhoneGap application } else { // Web page } 

快速解决scheme想到的是,

 onDeviceReady 

应该帮助你 由于这个JS调用仅由本地桥(objC或Java)调用,Safari浏览器将无法检测到这一点。 所以你的设备上的应用程序(电话差距)源代码将从onDeviceReady启动。

如果任何Phonegap的JS调用像Device.platform或Device.name是NaN或null,那么它显然是一个移动networking调用。

请检查并让我知道结果。

我想出了一个办法来做到这一点,而不是依靠deviceready事件,因此保持web代码库完好无损…

当前使用内置的deviceready事件的问题是,当页面加载时,你无法告诉应用程序:“嘿,这不是在移动设备上运行,没有必要等待设备准备就绪开始”。

1.-在代码的本地部分,例如对于iOS,在MainViewController.m中有一个方法viewDidLoad,我发送一个JavaScriptvariables,我稍后在Web代码中检查,如果该variables在附近,我会等待启动我的页面的代码,直到一切准备就绪(例如,导航地理位置)

在MainViewController.m下:

 - (void) viewDidLoad { [super viewDidLoad]; NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"]; [self.webView stringByEvaluatingJavaScriptFromString:jsString]; } 

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

PhoneGap有window.PhoneGap(或在Cordova中,它是window.cordova或window.Cordova)对象集合。 检查该对象是否存在,并做魔术。

在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被用于通话
         $('head')。append('<script src =“cordova.js”> </ script>');
     }
    

一个小小的警告 :这个方法需要改变每个不同的目标移动平台在手机上的index.html调用。 我不熟悉大多数平台在哪里做。

我使用PhoneGap应用程序和我们的Web客户端相同的代码。 这是我用来检测phonegap是否可用的代码:

 window.phonegap = false; $.getScript("cordova-1.7.0.js", function(){ window.phonegap = true; }); 

请记住phonegap js文件是asynchronous加载的。 你可以通过设置一个漂亮的jquery $ .getScript函数的正确选项来同步加载它。

请注意,这个方法确实会提供一个额外的GET请求来抓取phonegap js文件,即使在你的webclient中。 在我的情况下,它不影响我的web客户端的性能; 所以它最终成为一个很好的/干净的方式来做到这一点。至less直到别人发现一个快速的单行解决scheme:)

这听起来像是一旦webview在Phonegap应用程序启动,你正在加载另一个网页,是正确的? 如果这是真的,那么你可以根据configuration添加一个参数到请求的url。

例如,假设PHP,

 App.Config = { target: "phonegap" }; <body onload="onbodyload()"> var onbodyload = function () { var target = App.Config.target; document.location = "/home?target=" + target; }; 

然后在服务器端,如果目标是手机话筒,则包含phonegap js。

用户代理无法检测到差异。

我这样做的方式是使用一个全局variables,这个全局variables被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 --> 

cordova.js里面,我简单地说:

 __cordovaRunningOnBrowser__ = true 

在为移动设备构build时,不会使用cordova.js(而是使用平台特定的cordova.js文件),因此无论协议,用户代理或库如何,此方法都具有100%的正确性variables(可能会改变)。 可能还有其他的东西,我应该包括在cordova.js中,但我不知道他们到底是什么。

我也很挣扎,而且我知道这是一个古老的线索,但我没有看到我的方法在任何地方,所以认为ID分享它的帮助某人。

我在实际的useragent后设置了一个自定义的useragent:

 String useragent = settings.getUserAgentString(); settings.setUserAgentString(useragent + ";phonegap"); 

只是添加phonegapstring,所以其他网站依靠检测您的移动useragent仍然工作。

那么你可以像这样加载phonegap:

 if( /phonegap/i.test(navigator.userAgent) ) { //you are on a phonegap app, $getScript etc } else { alert("not phonegap"); } 

如果你尝试下面的话

 if(window._cordovaNative) { alert("loading cordova"); requirejs(["...path/to/cordova.js"], function () { alert("Finished loading cordova"); }); } 

在我看来,你试图为自我解决问题。 你没有提到你的开发平台,但大多数有不同的部署configuration。 你可以定义两个configuration。 并设置指示代码被部署在哪个方式的variables。 在这种情况下,您无需关心部署应用程序的设备。

简短有效:

 if (document.location.protocol == 'file:') { //Phonegap is present } 

类似BT的解决scheme ,但更简单:

我在我的www文件夹中有一个空的cordova.js,在build立时被Cordova覆盖。 不要忘记在您的应用程序脚本文件之前joincordova.js(花了我一个小时的时间才发现我的错误顺序是…)。

然后可以检查Cordova对象:

 document.addEventListener('DOMContentLoaded', function(){ if (window.Cordova) { document.addEventListener('DeviceReady', bootstrap); } else { bootstrap(); } }); function bootstrap() { do_something() } 

新解决scheme:

 var isPhoneGapWebView = location.href.match(/^file:/); // returns true for PhoneGap app 

旧解决scheme:
使用jQuery,像这样运行

 $(document).ready(function(){ alert(window.innerHeight); }); 

以iPhone为例,为您的移动应用程序,

当使用PhoneGap或Cordova时,您将获得460px的WebView,但在Safari中,由于浏览器的默认页眉和页脚,您将失去一些高度。

如果window.innerHeight等于460,则可以加载phonegap.js,并调用onDeviceReady函数

目前还没有人提到这一点,但似乎Cordova现在支持添加浏览器作为平台:

 cordova platforms add browser 

这会在运行时自动添加cordova.js,它具有onDeviceReady事件,所以你不需要伪装它。 另外,很多插件都支持浏览器,所以在代码中不会再有浏览器的问题。

要在浏览器中使用您的应用程序,您应该使用cordova run browser 。 如果你想部署它,你可以使用与其他平台相同的命令。

编辑:忘了提及我的来源 。