I am having the code to open the PDF url in Inappbrowser. I am trying this in Iphone.
cordova.InAppBrowser.open(aPdfURL, '_blank', 'location=no, EnableViewPortScale=yes');
It opens the PDF file, but when I try pinch zoom it is not working.
But if I change it to _system instead of _blank, it opens the SAFARI system browser and shows the PDF url, but then I see the URL in browser, which I don't want to.
Please suggest as to how I can fix it.
Try changing <meta> tag in index.html
For example:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
And also make sure to include respective <Script> tag in Index.html
For Example:
<!-- Cordova -->
<script src="cordova.js"></script>
<!-- Framework7 library -->
<script src="framework7/js/framework7.min.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Your custom app scripts -->
<script src="<custom lib>.js"></script>
Related
I have an Electron (1.7.10) application that is reporting it can't find 5 of 7 PNG files in my ASAR. All 7 PNGs are in the same folder, and 2 of them are displayed on screen fine. The other 5 report net::ERR_FILE_NOT_FOUND.
All src attributes for the img tags are dynamically generated and use relative paths (assets/images/MyImage.png). If I extract the ASAR, I can see the files in there, in the correct folder (as referenced by the src attribute).
If I use the console to set the location of my browser to one of the images (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") I get the same results - 2 of 7 show OK.
Before packaging my application (with electron-builder), all images show correctly.
Let me guess, you are building a react SPA using react-router, and BrowserRouter?
If so, use HashRouter instead. Electron does not work with SPA's route by default, because a SPA route changes, but the resource path is always relative to index.html.
I haven't evaluated the other answers, but for my particular case, an extremely solution worked. I don't believe this is well documented, so it might be fairly common for people to still encounter this issue. For my particulars, the relevant problem and solution were identified here.
To address, add <base href='./' /> to the index.html (or whatever your starting html file is that hosts your SPA). This is a complete example of mine:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="./" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'Self' 'unsafe-inline';"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
const path = require('path');
path.join(__dirname, 'assets/images/MyImage.png');
I recently found a bug on my phonegap application.
So, I decided to correct it (nice!) and I needed to update phonegap client to the new version 6.4.2.
Once done, I ran my application via "phonegap serve" and test my app on Android device and an iPhone device (with iOS 10).
Our application is a simple HTML page with an iframe inside in order to encapsulate our responsive design website.
Everything works great on Android AND on old iPhone (iOS 7.1.2) but on the new iPhone with iOS 10, the iframe doesn't load !!!
I search for a long time why... I do not understand...
So, I planned to create a new application
phonegap create TestApp
Here is the index.html code
<html>
<head>
<meta charset="utf-8" />
<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" />
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; frame-src *; ">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<iframe id="webview" src="https://www.google.com" onload="checkPage();">
</iframe>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
It's really the started page with an iframe inside and this iframe doesn't load and the checkPage() is never fired.
I tried to change "Content-Security-Policy" but... did not work...
I'm out of ideas, so, if somebody had the same issue and know how to resolve this... You're welcome !
Thanks,
I can provide you more code if you want
Laurent
The answer can be found in this question:
Cordova iOS blank iframe
Simply add the following to your config.xml file:
<allow-navigation href="*" />
I am using cordova to load plugins into my app. Here is the simplified reproduceable issue:
cordova create foo
cordova plugin add pluginname --save
cordova platform add android --save
cordova build android --verbose
I can run this app using phonegap and see it on my phone. The app reports deviceready as the basic starter app is supposed to. All looks great so far.
If I look in the plugin folder I can see my plugin there. In this case my plugin is called bluetoothle.
I edit the index.js file at a location that fires after the deviceready occurs and add "alert ( typeof (bluetoothle));"
I expect that when the alert fires it should report "object". It does not do this. It reports "undefined".
I have tried this with several other plugins and I always get the same result. So it would seem that no matter what plugin I install I cannot access any of the functions within the plugin.
I do have the same Problem. But I'm using the Phonegap CLI. And the following plugin: https://github.com/randdusing/cordova-plugin-bluetoothle
I add the plugin using the command:
$ phonegap plugin add cordova-plugin-bluetoothle
I've added platform android and ios.
So in the plugins folder there is the cordova-plugin-bluetoothle folder most probably being a valid plugin packet.
Also in the plugins folder there is the android.json and ios.json file containing the section:
"cordova-plugin-bluetoothle": {
"PACKAGE_NAME": "com.phonegap.helloworld"
},
in plaforms/android there is the android.json file containing:
{
"xml": "<feature name=\"BluetoothLePlugin\"><param name=\"android-package\" value=\"com.randdusing.bluetoothle.BluetoothLePlugin\" /></feature>",
"count": 1
},
in platforms/ios there is the ios.json file containing:
{
"xml": "<feature name=\"BluetoothLePlugin\"><param name=\"ios-package\" value=\"BluetoothLePlugin\" /></feature>",
"count": 1
},
I've targeted Android SDK API 23. As the readme tells...
As I have just modified the hello-world example to call bluetoothle initialize on after the deviceready event has fired.
So where could the problem be so that the bluetoothle variable is not defined in the index.js code, when the device is ready?
So here the complete code of index.js:
var bluetoothle;
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
console.log("platform: " + device.platform);
if(bluetoothle) {
console.log("bluetooth is not defined!");
} else {
console.log("bluetooth is not defined!");
}
console.log("yhea managed to initialize Bluetooth LE!");
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
And the complete code of index.html:
<html>
<head>
<meta charset="utf-8" />
<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" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</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="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Sooo,
The Issue I had before I just "worked around" by using a different Plugin for my Bluetooth Low Energy stuff.
Later I ran into the same Problem again with another Plugin.
And then I finally got the picture where it all makes sense:
I was mainly using the Phonegap Developer App to test on-the-fly.
The Phonegap Developer App comes bundled with all the Core Plugins and some others.
!! Those plugins which are not bundled already, will never be accessible for your Phonegap Developer App for testing !!
phonegap plugin add cordova-plugin-new-unbundled
Will not make it available to the App. Only download and prebuild the files for a potential real build.
To make this work in the Phonegap Developer App you would need to build your own Phonegap Developer App adding the Plugins you need.
Otherwise your Plugins are only available in a real build.
I have a bootstrap/angular js ui-router app that is created in windows visual studio on a windows tablet. Originally the need was to have the app for Windows users, now its needed for all devices.
After the app was created for browser, I was able to import it into visual studio for cordova. I got everything working testing in Windowsx64 - local machine settings. I tried plugging my iphone to tablet to test the iOS version of the app but I never got that working. So I tried testing with the Ripple simulator that Visual Studio comes with. The simple start page and any other apps would work great from device to device, but just this specific app ui-router and styles do not transfer over and do not show up on iOS and Android. No errors logs show up when in iOS or Android mode.
the code behind the app:
index.html
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<!--
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 *">
<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">
<!-- STYLE SHEETS-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Clinical Cases Program</title>
</head>
<!-- apply our angular app to our site -->
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landing">Clinical Cases App</a>
</div>
</div>
</nav>
<h1>The device is running</h1>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<!-- SCRIPTS -->
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-router.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>
script.js
routerApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME VIEWS =================================
.state('landing', {
url: '/home',
templateUrl: 'templates/partial-landing.html'
})
// FILTERS VIEWS ========================================
.state('filters', {
url: '/filters',
templateUrl: 'templates/partial-filters.html',
controller: 'FilterToggleController',
controllerAs: 'vm'
})
// CASES VIEWS =================================
.state('cases', {
url: '/cases',
templateUrl: 'templates/partial-cases.html',
controller: 'CasesController',
controllerAs: 'vm'
});
});
//"myApp" is the your module
routerApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appx-web|x-wmapp0):|data:image\//);
}]);
Is there a specific folder in Visual Studio or Cordova that overwrites these style/script? Is there something wrong with Ripple simulators?
Attached are screenshots of the original windows app and other iOS and Android Ripple.
Windows x64 - local machine
Android - Ripple-Nexus(Galaxy)
Android Ripple - Nexus 7 (tablet)
iOS - Ripple iphone 5
iOS - Ripple ipad 3
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;