本文概述
为什么我需要检测是否正在使用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 component
document.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 component
function 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 + ")");
}
// Or
if(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="cordova.js" onload="javascript:window.usingCordova = true;"></script>
然后:
if(window.usingCordova){
console.log("Using cordova");
}
编码愉快!