I am just trying to run a simple page within the inappbrowser plugin. I am running Cordova 5.0, and the plugin is version 1.0. I run the app with the splashscreen plugin and it seems to work fin. The default splashscreen runs when the app start but the in app browser plugin does not seem to work. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script type="text/javascript" src="../platforms/android/assets/www/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
alert("dfs");
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
The cordova.js file is properly linked I assume since that is the correct path. I have also uninstalled and installed the plugin back, created a new project and none of them seem to solve my problem. I am testing it on my Android 5.0 smartphone and Android 4.1 emulator. Any ideas?
Just include corodova.js as follows
<script type="text/javascript" src="cordova.js"></script>
And use ripple emulator [which is a google plugin] and you will see onDeviceReady() is fired. Acutually this works well for me. Please try it
Related
I am trying to make a Web API request using $http, but it returns me a status code of -1, an error response after making the request. This happens only in the release build version of the app. If I run the app in the Debug version I can make a Web request.
The same issue I will face if I use Restangular to make Web request.
I created a sample cordova project and below is the code for it
(function () {
var app = angular.module('testApp', []);
})();
(function () {
"use strict";
var app = angular.module('testApp', []);
app.controller("testCtrl", [ '$http', function ($http) {
alert("test Request");
var validatePromise = $http({
method: 'GET', url: 'https://SampleURL.list'
});
validatePromise.then(function (success) {
alert("success");
}, function (error) {
alert("error");
alert(JSON.stringify(error));
});
}]);
} )();
Below is the Html code
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"
content="default-src * 'self'
'unsafe-inline' 'unsafe-eval' http://* https://* data: cdvfile://* content://*;">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="css/ionic.min.css" rel="stylesheet">
<script src="scripts/ionic.bundle.min.js"></script>
<script src="scripts/index.js"></script>
<title>BlankCordovaApp3</title>
</head>
<body ng-controller="testCtrl">
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align
title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Page 1" hide-back-button="true">
<ion-content class="padding">
<button class="button">
Default
</button>
</ion-content>
</ion-view>
</body>
This issue I get only in the Release build and for Android Version below 4.4 (Kitkat)
In my app I have a directive inside a repeater, and the directive displays the URLs to the users.
The code I have is the following:
var onDeviceReady;
onDeviceReady = function() {
console.log("this was called");
return window.open = cordova.InAppBrowser.open;
};
document.addEventListener('deviceready', onDeviceReady, false);
and in the html
{{data.url}}
When i try to open the app on the android device, the console message is printed properly (meaning that the function should be called) but all the url is not opening at all.
My index file looks like this (in case is useful):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy"
content="default-src * gap://ready file: data:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
<title></title>
<link href="css/bower.css" rel="stylesheet" id="bower-css">
<link href="css/style.css" rel="stylesheet" id="style-css">
</head>
<body ng-app="myApp" ng-strict-di>
<ion-nav-view class="slide-left-right" animation="slide-left-right"></ion-nav-view>
<script src="js/bower.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/templates.js"></script>
</body>
</html>
And the plugins i currently have installed are the following:
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-whitelist 1.3.2 "Whitelist"
The problem is the on-click
You can use the html onclick, or the angular ng-click or on-tap, but on-click doesn't exist
Also, you don't need the return for the onDeviceReady, but that doesn't prevent it from working.
I finally managed to get it working at the end.
Basically, I replaced
ng-click="window.open('{{data.url}}', '_blank', 'location=yes');">
with a function:
ng-click="openRUL({{data.url}})">
and then the function looks like this:
$scope.openURL = function (url){
window.open(url, '_blank', 'location=yes')
}
and it's working perfectly fine now.
I am new to phonegap. I have installed the Cordova Local-Notification Plugin.
But i am getting error "cannot read the property 'local' of undefined phonegap"
Here is my code
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="appa">
<h1>Apache Cordovadas</h1>
<!--<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>-->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="../plugins/de.appplant.cordova.plugin.local-notification/www/local-notification.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<!-- <script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap-1.0.0.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
document.addEventListener('deviceready', function () {
alert("start");
// Schedule notification for tomorrow to remember about the meeting
cordova.plugins.notification.local.schedule({
id: 10,
title: "Meeting in 15 minutes!",
text: "Jour fixe Produktionsbesprechung",
at: tomorrow_at_8_45_am,
data: { meetingId:"#123FG8" }
});
// Join BBM Meeting when user has clicked on the notification
cordova.plugins.notification.local.on("click", function (notification) {
if (notification.id == 10) {
joinMeeting(notification.data.meetingId);
}
});
// Notification has reached its trigger time (Tomorrow at 8:45 AM)
cordova.plugins.notification.local.on("trigger", function (notification) {
if (notification.id != 10)
return;
// After 10 minutes update notification's title
setTimeout(function () {
cordova.plugins.notification.local.update({
id: 10,
title: "Meeting in 5 minutes!"
});
}, 600000);
});
alert("start");
}
,
false);
</script>
</body>
</html>
Please help me out of this im getting hold for last 3 days.
Thanks in Advance.
Try running it on your actual phone or on an emulation.
Many plugins wont fully work while testing on a browser.
i have a little problem.
I start an empty cordova app in visual studio 2015 and just for some tests i want to try the ng-cordova plugins (without ionic) in my app. I follow the ng cordova documentation and i added the ng-cordova.min.js file just BEFORE the cordova.js and AFTER the angular.js file. I didn't add nothing to my index.html file and on the script that is called after the cordova js file i wrote this :
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
function onDeviceReady() {
var app_ng=angular.module('myApp', ['ngCordova']);
console.log('device ready');
$cordovaFile.getFreeDiskSpace()
.then(function (success) {
console.log(success);
}, function (error) {
console.log(error);
});
};
} )();
<html>
<head>
<meta charset="utf-8" />
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<title>ngcordovatest</title>
<!-- ngcordovatest references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<p>Hello, your application is ready!</p>
<div id="console">
</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="scripts/jquery.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/ng-cordova.min.js"></script>
<script src="scripts/ng-cordova-mocks.min.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
I always obtain the following error :
Uncaught ReferenceError: $cordovaFile is not defined
I use an android device for debug connected by USB.
What's the problem? I can't figure it out. Thank you.
As 'angular' is only the useful object in current scope. So, try something like
function onDeviceReady() {
.........
angular.element(document).ready(function () {
angular.element(document.body).injector().invoke(['$cordovaFile', function($cordovaFile){
$cordovaFile.getFreeDiskSpace()
.then(function (success) {
console.log(success);
}, function (error) {
console.log(error);
});
}]);
}
});
I tried to convert a react application into a mobile app, i got success with iOS, but now, when I'm trying with android, it shows the white screen of death, and the chrome remote inspector doesn't show any significant reason, this is the chrome log
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MMJ Recs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/main.css"/>
<script>
window.prompt = function(){
}
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script src="./js/index.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/vendor.js"></script>
<script src="./js/vendor.bundle.js"></script>
<script src="./js/build.js"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_AzADtnJ7sM7pQJu32JOmHB3M');
</script>
</body>
</html>
and this is my main.js
import React from 'react';
import Router from 'react-router';
import routes from './routes';
import ReactDOM from 'react-dom';
//ReactDOM.render(routes, document.getElementById('app'));
function startApp(){
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
function startAppCordova(){
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
window.onload = function(){
var url = document.URL;
var isSmart = (url.indexOf("http://") === -1 && url.indexOf("https://") === -1);
if( isSmart ){
document.addEventListener('deviceready', startAppCordova, false);
}
else{
startApp();
}
}
I suspect it could be a problem with the JavaScript engine, for older phones which have older JS engines you can use a Polyfill downloaded from https://cdn.polyfill.io/v2/docs/, which I used it to sort out this error which I saw when running adb logcat with my phone connected and opened the app :
Uncaught TypeError: Object function Object() { [native code] } has no method 'assign
Run adb logcat to see what the error is in your case, you probably won't see it from the Chrome console