如何知道你的应用程序是否在Cordova或Web浏览器中运行 _Web

本文概述

为什么我需要检测是否正在使用Cordova
选项1
选项2
选项3

为什么我需要检测是否正在使用Cordova假设你使用的是很棒的React框架, 并且初始化应用程序的主Javascript文件如下所示：

import React from 'react'; import {render} from 'react-dom'; import injectTapEventPlugin from 'react-tap-event-plugin'; import Main from './Main'; // Our custom react component// Render the main app react component into the app div. // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render render(< Main /> , document.getElementById('app'));

它可以在移动设备和浏览器上运行, 没什么特别的。但是, 在我们的主要组件中, 有一个cordova插件, 仅在cordova的设备就绪事件之后才需要执行, 这将迫使我们执行以下操作：

import React from 'react'; import {render} from 'react-dom'; import injectTapEventPlugin from 'react-tap-event-plugin'; import Main from './Main'; // Our custom react componentdocument.addEventListener("deviceready", () => { // Render the main app react component into the app div. // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render render(< Main /> , document.getElementById('app')); }, false);

一旦设备就绪被触发, 该应用将被初始化, 但这将使该应用只能在移动设备上运行, 而不能在桌面上运行, 因为此事件永远不会在桌面的Web浏览器中触发。因此, 一种验证何时加载cordova(仅在移动设备中)的方法非常有用：

import React from 'react'; import {render} from 'react-dom'; import injectTapEventPlugin from 'react-tap-event-plugin'; import Main from './Main'; // Our custom react componentfunction initApp() { // Render the main app react component into the app div. // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render render(< Main /> , document.getElementById('app')); }// The usingCordova function returns true if cordova is in the window if(usingCordova()){ // Init app on device ready document.addEventListener("deviceready", () => { initApp(); }, false); }else{ // Init app immediately initApp(); }

这样, 我们的应用将在两种类型的设备中正确初始化。
注意是的, 还有其他方法可以初始化应用程序并在其他情况下添加事件侦听器, 但是, 这只是一个示例, 以了解为什么对检测是否加载了Cordova有用。
选项1验证窗口是否具有名为cordova的属性。 cordova.js文件将在全局范围(窗口)中添加cordova对象, 如果该对象存在, 则该应用程序很可能在移动设备上运行：

if(window.hasOwnProperty("cordova")){ console.log("You're on a mobile device"); }// Or if(typeof(cordova) == "object"){ console.log("You're on a mobile device"); }// Or if(!!window.cordova){ console.log("You're on a mobile device"); }

请注意, cordova脚本需要在html文档中加载。
选项2如你所知, cordova在Webview中加载了一个html文件, 这意味着你正在使用一个网站在移动浏览器中说话, 并且由于要在浏览器中查看每个html文档, 因此都需要从网址。该文件将始终从本地资源加载, 这意味着该文件的协议永远不会(除非直到日期)是http或https, 而不会是file：//(例如, 在Android中, 因为在Windows Phone中是x-wmapp0)。
关键是, 通过文档协议, 你可以通过检查协议不是http还是https来检查应用程序是否在移动设备上运行, 因此可以使用cordova：

if(document.location.protocol != "http:" & & document.location.protocol != "https:"){ console.log("Cordova probably available (Running with protocol " + document.location.protocol + ")"); }// Orif(document.URL.indexOf('http://') === -1 & & document.URL.indexOf('https://') === -1){ console.log("Cordova probably available (URL " + document.URL + ")"); }

请注意, 你需要使用http或https协议在桌面上测试项目, 从文件中加载该项目将使该选项无效。
选项3为cordova脚本添加一个事件侦听器(加载), 该事件侦听器在窗口中创建一个布尔变量(usingCordova), 该变量最初设置为false, 然后在cordova脚本加载后将其设置为true。然后, 你可以使用简单的if语句来验证是否已加载Cordova。

< script> window.usingCordova = false; < /script> < script src="http://www.srcmini.com/cordova.js" onload="javascript:window.usingCordova = true; "> < /script>

然后：