Im using cordova 3.3.0 and i would like to open a local pdf file and then close it on user demand.
ref = window.open(encodeURI(path), '_blank', 'location=yes');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
This opens a file in inapp browser but i cannot get back to the actual app when I open some pdf file. How to add some close button or something ?
Im trying to get this working on ios.
Long time since you asked this but just had exactly the same issue. I had to install the inAppBrowser plugin on my project and the Done button appeared. Without the plugin installed, the pdf opened but the Done button was not shown.
What you have should work. On iOS a "Done" button should appear in the lower left of the screen.
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=yes');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
I tested on iOS 6.1 and iOS 7. Of course you can set location=no to remove the URL at the bottom.
Related
I have tried every possible way to access camera on webview on cordova.
It work on android, but doesn't work on iOS.
Can someone explain how to implement access camera feature via cordova webview on iOS thanks.
Inappbrowser side (Angular)
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: 'environment' } })
.then(stream => {
// this.videoDom.srcObject = stream;
this.videoDom.srcObject = stream;
this.videoDom.setAttribute('playsinline', 'true');
this.videoDom.play();
this.stream = stream.getTracks();
requestAnimationFrame(tick);
})
}
Cordova side
I have install cordova-plugin-camera and add permission in config.xml on ios platform.
On iOS11/12 navigator.getMediaDevices is not available for WKWebView and UIWebView. It is only available for Safari. (https://forums.developer.apple.com/thread/88052)
WebRTC is only supported in Safari. No WKWebView, not even
SFSafariViewController.
You can try to use this plugin normally should solve your problem: https://github.com/phonegap/phonegap-plugin-media-stream
navigator.mediaDevices.getUserMedia({
'audio': true,
'video': {
facingMode: 'environment'
}
}).then(function(mediaStream) {
// Do what you want with
}
There is a simpler way, just use input type file
This shows the camera for taking a picture
<input type="file" accept="image/*" capture>
This for recording video
<input type="file" accept="video/*" capture>
This will prompt to take a picture or video, choose from the photo library or explore files
<input type="file">
There are a few other combinations. But it probably doesn't work on Android
This is a duplicate of: NotReadableError: Could not start source (Please read this link as its related to Cordova and getUserMedia) and potentially Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?
There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
SFSafariViewController has gained getUserMedia functionality (!!!)
https://bugs.webkit.org/show_bug.cgi?id=183201
However WKWebView does not seem to gain getUserMedia functionality (this might be a bug, watch the webkit link closely):
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
https://bugs.webkit.org/show_bug.cgi?id=185448
iOS 13 and Safari 13 release notes:
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
I've thought of a hacky way you can make this work on iOS by using the new postMessage API feature of cordova-plugin-inappbrowser which enables you to send messages from pages loaded into the Inappbrowser Webview back to the main Cordova app Webview.
This is not present in the latest release on npm (3.0.0), so you'd need to install the master version (3.1.0-dev) directly from Github:
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
In the page loaded into the inappbrowser, you can then post messages back to the Cordova app webview:
function openCamera(){
postMessage({
action: "camera"
});
}
function postMessage(message){
if(!webkit.messageHandlers.cordova_iab) throw "Cordova IAB postMessage API not found!";
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
}
<button onclick="openCamera()">Open camera<button>
On the Cordova app side, you can then listen for that message and respond to it:
var iab = cordova.InAppBrowser.open(myUrl, '_blank', iabOpts);
iab.addEventListener('message', function (e) {
if(e.data.action === 'camera'){
openCamera();
}
});
function openCamera() {
var animationDelay = 500; // delay to wait for camera window animation
navigator.camera.getPicture(function(){
log("successfully opened camera");
if (device.platform === "iOS"){
// unhide IAB
iab.show();
}
}, function(cameraError){
error("error opening camera: "+cameraError);
if (device.platform === "iOS"){
iab.show();
}
});
if (device.platform === "iOS"){
// hide IAB so camera window is in view
setTimeout(iab.hide, animationDelay);
}
}
This allows you to directly call cordova-plugin-camera from within the inappbrowser.
However it is hacky because on iOS, by default the camera window will appear below the inappbrowser window in the view hierarchy and hence not be visible.
My hack is to hide the inappbrowser window upon opening the camera, which causes the camera window to be at the top of the visible view hierarcy and be displayed.
However, upon dismissing the camera window, the Cordova app window will briefly be displayed while the inappbrowser window is being animated to show again.
I created a test case example in my inappbrowser test app repo: https://github.com/dpa99c/cordova-plugin-inappbrowser-test/tree/camera
You can try it like this:
git clone -b camera https://github.com/dpa99c/cordova-plugin-inappbrowser-test
cd cordova-plugin-inappbrowser-test
cordova platform add ios
cordova run ios
I added the plugin to my app like so: cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
Here's my code in my controller:
$scope.OtherShare = function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
}
My code works well on my android device. But in iOS it only works after I exit the app then goes back to it. I tried adding $ionicPlatform.ready before/after button click but it didn't changed a thing? What am I missing?
This is strange, I am guessing this would be a device.ready issue. Try wrapping up your code in the device ready callback like
$scope.OtherShare = function(){
document.addEventListener("deviceready", function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
}, false);
}
In Ionic
$scope.OtherShare = function(){
ionic.Platform.ready(function(){
window.plugins.socialsharing.share('myTitle',null,null,'sometingIShareHEre');
});
}
Hope it helps
I am developing app using cordova 5.4.1, Also I am using latest InAppBrowser plugin. Below are the steps to reproduce the issue.
Open the URL in InAppBrowser
Change the app orientation from portrait to landscape
Press done button of InAppBrowser and check the app in landscape mode only, you will get some blank portion
I am using iOS 9.2.1
Please let me know if some one has faced same issue and got fixed.
Thank you in advance.
I know it's a bit late but I wanted to share how I fixed this in case you or anyone else is having this issue.
As noted in the issue mentioned in jcesarmobile's comment, it appears that cordova-plugin-statusbar & cordova-plugin-inappbrowser don't play nice together. The ticket status says resolved, although I'm still having this problem. To fix it you can either delete the plugin, or, if you need the plugin then you can add an event listener to hide then show it again on exit:
openUrl(url) {
let ref = cordova.InAppBrowser.open(url, '_blank', options);
ref.addEventListener('exit', () => {
StatusBar.hide();
StatusBar.show();
})
}
StatusBar.hide() is what fixes the issue.
EDIT: As noted by René in the comments of this similar issue, a blank column exists in iPad with the fix noted above. In order to completely fix the issue in both iPhone and iPad without having to remove the plugin, wrap the StatusBar.show() call inside a setTimeout of a second:
openUrl(url) {
let ref = cordova.InAppBrowser.open(url, '_blank', options);
ref.addEventListener('exit', () => {
StatusBar.hide();
setTimeout( () => {
StatusBar.show();
}, 1000)
})
}
I am trying to do a map link in my app which when user click on it, it will open the native map app on iOS. When my code looks something like this href="maps://maps.apple.com/?ll=1.5149818510303,110.35436153412", it works. However, when I put ng-href="maps://maps.apple.com/?ll=1.5149818510303,110.35436153412", I will get Failed to load webpage with error: The URL can’t be shown error shown on XCode.
How can I fix it?
I use this to open the maps app on my ionic application:
JS:
$scope.openNavigator = function() {
var geoString = '';
if(ionic.Platform.isIOS()) {
geoString = 'maps://?q='+$scope.Latitude+','+$scope.Longitude+'';
}
else if(ionic.Platform.isAndroid()) {
geoString = 'geo://?q='+$scope.Latitude+','+$scope.Longitude+'';
}
window.open(geoString, '_system');
}
HTML:
<div ng-click="openNavigator()">
And it works perfect.
I'm using ionic version 1.7.12 with the plugin phonegap-plugin-barcodescanner version 4.1.0 on OSX 10.11.2, additional node version is v0.10.26 and cordova 5.4.1 testing on IOS 6+, after my projects compile and install the ipa on the testing device when i try to open the scanner it freeze the app, something to add this is a legacy app.
The estrange thing its that if i start a new project from scratch using ionic cli and and install the plugin it works just fine.
Any place where i should look or what im doing wrong.
Thanks
What do you mean by "freeze"? i have similar problem, when i toggle bar code scanner with a button clicked, it open up a camera view and freeze, and by "freeze" i mean a image toked by the camera and not moving(you can still click cancel button and return back to the view).
i found out the button click event has toggle twice with one click and it explained why you have a image not moving.
i solved this problem by working around.
$scope.scannerActive = false;
$scope.scanBarcode = function() {
if(!$scope.scannerActive) {
$scope.scannerActive = true;
$ionicPlatform.ready(function() {
$cordovaBarcodeScanner.scan().then(
function(result) {
if (!result.cancelled) {
console.log(result)
}
else {
console.log('cancelled')
}
},function(error) {
alert(JSON.stringify(error));
}).finally(function() {
$scope.scannerActive = false;
});
});
}
};