如何检测我是否在 Ionic 2 中的浏览器(本地开发)中

How to detect if I am in browser (local development) in Ionic 2

我想确保仅当我在设备上(iOs、Android...)时启动 inappbrowser,但如果我在浏览器中(本地开发模式或只是 Web gulp 构建的应用程序),我只想 link 到带有 target="_blank" 的页面。

我正在尝试将 Ionic 2 代码重新用作 Web 应用程序。所以当我构建应用程序时,它也可以在浏览器桌面上运行。所以 platform.ready() 对我来说还不够。因为我需要知道用户是否在桌面浏览器上,所以我可以做一些不同的事情。

您可以使用 platform.is('core'),在浏览器上为真。平台列表:

  • android:在设备上 运行 Android.
  • cordova:在设备上 运行 Cordova。
  • 核心:在桌面设备上。
  • ios: 一个设备 运行 iOS.
  • ipad:在 iPad 设备上。
  • iphone:在 iPhone 设备上。
  • 移动:在移动设备上。
  • mobileweb:在移动设备上的浏览器中。
  • 平板手机:在平板手机设备上。
  • 平板电脑:在平板设备上。
  • windows:在设备上 运行 Windows.

有关详细信息,请参阅 http://ionicframework.com/docs/v2/api/platform/Platform/

好的,您可以使用以下功能代替点击功能。

onClickOfButton(){
      // Check If Cordova/Mobile
   if (this.platform.is('cordova')) {
        window.location.href = url;
   }else{
        window.open(url,'_blank');
   }
}

这很有用:)

基于 hhung,因为 core 仅检测您是否使用 windows 浏览器打开应用程序,但如果您使用 chrome 移动仿真, core 将 return 为假,但 mobileweb 将 return 为真。因此,您应该使用以下内容:

if(this.platform.is('core') || this.platform.is('mobileweb')) {
  this.isApp = false;
} else {
  this.isApp = true;
}

我们有一种简单的方法可以知道我们是在浏览器中还是在设备 (emulate/build) 中 运行 宁项目的“/www”文件夹。

在 Cordova/Phonegap 的本地项目中,index.html 有这个标签:

<script type="text/javascript" src="cordova.js"></script>

但是这个文件是不存在的,因为Cordova/Phonegap会在我们模拟或者构建的时候注入phonegap.js或者cordova.js。如果我们在浏览器中 运行 www 文件夹,总是会看到这样的错误:

GET file:///D:/Cordova/Workspace/TestProject/www/cordova.js net::ERR_FILE_NOT_FOUND

然后我们可以检查 index.html 标签是否加载此文件。如果加载,我们在应用程序中,如果没有,我们在浏览器中(本地):

<script type="text/javascript" src="cordova.js" onload="alert('app!');"></script>

我们认为这是知道我们在哪里的最快方法。

我在 Ionic 3 应用程序中遇到了同样的问题,发现 here 一种检查应用程序是在浏览器中运行还是在真实环境中运行的好方法 device/emulator:

isApp = !document.URL.startsWith('http');

基本上它依赖于这样一个事实,即真实设备或模拟器使用 file 协议而不是浏览器使用的 http 来提供资源。

有了这个你可以检测你是否在浏览器中:

if(window.hasOwnProperty('cordova')){ /* use webview */ }
else { /* use browser link */ }

对我来说最可靠的解决方案是结合使用平台的 .is() 方法及其承诺的结果。我在提供商内部使用了支票,因此我可以在全球范围内使用它。也许这种方法对用尽其他路径的人有用。

import { Platform } from 'ionic-angular';

constructor(public platform: Platform) { 

  public env:string = 'dev';

  this.platform.ready().then((readySource) => {

    if (readySource) {
      if (platform.is('core') || readySource.toLowerCase() !== 'cordova') {
        this.env = 'dev';
      }
      else {
        this.env = 'production';
      }
    }