在手機瀏覽器或PhoneGap應用程序之間進行檢測

58

您可以檢查當前URL是否包含http協議。

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

來源

2012-09-04 02:04:12 EricL

+1

even even：window.phonegap =（document.URL.indexOf（「http：//」）== -1）; – EricL 2012-09-04 02:06:34

+0

這種方式你不需要等待PhoneGap/Cordova加載，然後才能檢查它。 – EricL 2012-09-04 17:27:31

+1

我測試過，效果很好！這正是我尋找的解決方案類型，只有在它是應用程序時才導入PhoneGap。 – 2012-09-08 00:14:54

7

PhoneGap has window.PhoneGap（或在科爾多瓦，它的window.cordova或window.Cordova）對象集。檢查該對象是否存在，並執行該魔術。

來源

2012-04-27 08:51:27 zvona

+1

該解決方案的問題是，我必須包含或不包含PhoneGap文件，具體取決於是否構建頁面或應用程序。目標是獨立於部署目標使用相同的代碼。 – 2012-04-27 08:59:23

+0

然後，它聽起來有問題，因爲UIWebView包含相同的移動Safari，我認爲。讓我檢查一下我以後是否找到了一些東西 – zvona 2012-04-27 09:04:14

15

快速解決想到的是，

onDeviceReady

會幫助你們。由於此JS調用僅由Native橋（objC或Java）調用，因此Safari瀏覽器將無法檢測到此情況。因此，您的設備應用程序（電話缺口）源代碼將從onDeviceReady啓動。

如果任何Phonegap的JS調用像Device.platform或Device.name是NaN或null，那麼它顯然是一個移動Web調用。

請檢查並讓我知道結果。

來源

2012-04-27 09:42:11 Futur

+0

確定看到你對Zvona的迴應後，現在我明白你甚至想要決定是否加載或不加電話。讓我再次檢查 – Futur 2012-04-27 09:45:28

+3

此解決方案的唯一問題是，在部署網頁時，爲了獲取phonegap文件，請求了額外的請求。 – 2012-05-14 09:03:31

+0

如果你真的可以逆向工程的Phonegap源（JS）。一段觸發onDeviceReady本地調用的代碼。這會使它比較輕便。您可以在設備上加載其他PhoneGap的JS。一個昂貴的操作來測試。儘可能嘗試。 – Futur 2012-05-20 05:13:14

4

我爲phonegap應用程序和我們的web客戶端使用相同的代碼。下面是我用來檢測phonegap是否可用的代碼：

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

請記住phonegap js文件是異步加載的。您可以通過設置一個漂亮的jquery $ .getScript函數的正確選項來同步加載它。

請注意，該方法確實會提供額外的GET請求來抓取phonegap js文件，即使在您的webclient中也是如此。就我而言，它並不影響我的webclient的性能;所以它最終是至少要等到別人找到一個快速的在線解決方案:)

來源

2012-05-09 14:07:19 Aki

+0

並非所有的phonegap應用程序都是用cordova構建的。檢測phonegap.js可能會更好。 – TMB 2012-05-14 01:22:54

0

新的解決方案一個不錯/乾淨的方式做this.Well：

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

舊解決方案：
~~使用jQuery，像這樣運行~~

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

以iPhone爲例爲您的移動應用程序，

使用的PhoneGap或科爾多瓦，你會得到的WebView的460像素，但在Safari中，你會輸，因爲瀏覽器默認的頁眉和頁腳的一些高度。

~~如果window.innerHeight等於460，可以裝載phonegap.js，並調用onDeviceReady功能~~

來源

2012-05-11 11:19:52

+0

這似乎是一個很好的解決方案，我怎樣才能使它通用？我正在爲幾個移動設備進行部署。 – 2012-05-11 11:43:28

+0

您可以通過使用navigator對所有設備的條件 – 2012-05-11 11:55:21

+2

現在似乎不是一個好的解決方案lol – 2012-05-12 19:14:00

1

在我看來，你儘量使問題的自我。您沒有提到您的開發平臺，但其中大多數具有不同的部署配置。您可以定義兩種配置。並設置變量，指出代碼的部署方式。在這種情況下，您不需要關心部署應用程序的設備。

來源

2012-05-11 11:51:19 RredCat

4

這聽起來像是你一旦webview在Phonegap應用程序啓動時加載另一個網頁，是否正確？如果這是真的，那麼你可以根據配置向請求url添加一個參數。

例如，假定PHP，

App.Config = { 
    target: "phonegap" 
}; 

<body onload="onbodyload()"> 

var onbodyload = function() { 
    var target = App.Config.target; 
    document.location = "/home?target=" + target; 
};

然後在服務器側，包括所述的PhoneGap JS如果目標的PhoneGap。

無法使用用戶代理檢測差異。

來源

2012-05-13 13:29:24 sciritai

6

在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>'); 
    }

一個小警告：此方法需要更改每個不同的目標移動平臺在phonegap中調用index.html。我不熟悉大多數平臺在哪裏做這件事。

來源

2012-05-13 17:58:27 Pirokiko

11

我想出了一個辦法做到這一點，而不是依靠deviceready事件。因此，保持網頁的代碼庫完整...

當前的問題與使用內置的deviceready事件，就是當頁面你無法告訴應用程序：「嘿，這不是在移動設備上運行，沒有必要等待設備準備啓動」。

1.-在代碼的本地部分，例如iOS中，在MainViewController.m中有一個方法viewDidLoad，我發送一個javascript變量，我稍後在web代碼中檢查，如果該變量在index.html中的代碼是這樣

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

2：：，我會迫不及待地開始了代碼爲我的網頁，直到一切準備就緒（例如，導航地理定位）

在MainViewController.m：

function onBodyLoad() 
{ 
    document.addEventListener("deviceready", onDeviceReady, false); 
} 

function onDeviceReady(){; 
    myApp.run(); 
} 

try{ 
    if(isAppNative!=undefined); 
}catch(err){ 
    $(document).ready(function(){ 
     myApp.run(); 
    }); 
}

來源

2012-07-08 16:24:15

+0

我們還可以更進一步，並將用戶代理更改爲像MyAppLoader XXHDPI。這將有助於加載更好的圖像。這是相當不幸的，科爾多瓦不具備這種功能。 – 2013-12-17 19:20:05

+0

這個解決方案對我來說真的很好，但請注意[科爾多瓦4需要一些小的改動]（http://stackoverflow.com/questions/34896815/self-viewcontroller-webview-stringbyevaluatingjavascriptfromstring-does-not-work/34967395）。 'if（[self.webView isKindOfClass：[UIWebView class]]）{（UIWebView *）self.webView stringByEvaluatingJavaScriptFromString：jsString]; }' – diffalot 2016-07-03 19:47:56

4

我這樣做的方式是使用一個全局變量，它被瀏覽器版本的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

當建立了一個移動設備，科爾多瓦.js將不會被使用（而是使用平臺特定的cordova.js文件），所以無論協議，用戶代理或庫變量（可能會更改），此方法都有100％的正確性。我應該在cordova.js中包含其他內容，但我不知道它們是什麼。

來源

2013-08-28 01:29:51

+1

我很高興我一直滾動到底部 - 這裏列出的方法是我最喜歡的。 – 2014-06-11 13:59:04

4

Ive ben正在爲此苦苦掙扎，而且我知道這是一條古老的線索，但我並沒有在任何地方看到我的方法，所以我認爲id分享它會幫助某人。

我設置的實際用戶代理後的自定義用戶代理：

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

，只是增加了PhoneGap的繩子，讓其他網站依靠檢測您的移動用戶代理仍然有效。

然後你就可以加載PhoneGap的是這樣的：

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

來源

2013-11-29 09:24:32 Havihavi

1

短而有效：

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

來源

2014-02-07 16:52:55 AmpT

4

如果您嘗試以下內容：

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

來源

2014-03-13 12:36:53 user3415370

+0

檢查'window._cordovaNative'爲我工作！至少在Android上。 cordova.js的其他地方有一個評論，暗示它不會在Android <= 3.2上運行。 – phreakhead 2014-04-01 05:36:56

1

類似B T's solution，但更簡單：

我在我的www文件夾中有一個空的cordova.js，它在構建時被Cordova覆蓋。不要忘記在您的應用程序腳本文件之前加入cordova.js（花了我一個小時才發現我的錯誤順序是......）。

然後，您可以檢查科爾多瓦對象：

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

function bootstrap() { 
    do_something() 
}

來源

2016-02-14 18:28:29

0

沒有人提到這還沒有，但它似乎科爾多瓦現在支持將瀏覽器作爲平臺：

cordova platforms add browser

這將自動添加科爾多瓦.js在運行時，其特點是onDeviceReady事件，所以你不需要僞造它。此外，許多插件都支持瀏覽器，因此您的代碼中沒有更多的瀏覽器黑客入侵。

要在瀏覽器中使用您的應用，您應該使用cordova run browser。如果你想部署它，你可以使用與其他平臺相同的命令。

編輯：忘記提及my source。

來源

2016-07-21 10:12:41

在手機瀏覽器或PhoneGap應用程序之間進行檢測

回答

相關問題