i'm beginner in Ionic
the download function in my website doesn't work (it doesn't show anything) if the web is run in an iframe embedded in IONIC 4, like this:
<ion-content fullscreen>
<iframe src="http://www.myweb.com" scrolling="yes" frameBorder="0" allowfullscreen></iframe>
</ion-content>
but if the web is run on a browser such as opera, chrome, mozilla, and others, the download function works fine.
How to solve this problem, thanks...
Instead of using in you app, try using inAppBrowser:
installation:
npm install cordova-plugin-inappbrowser
npm install #ionic-native/in-app-browser
ionic cap sync
then in ts file:
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
openPage(){
let browser = this.iab.create('http://www.myweb.com', '_blank'
, {
lefttoright: 'yes',
hideurlbar: 'no',
fullscreen: 'yes',
hardwareback: 'yes',
toolbarcolor: '#145a7b',
zoom: 'no',
useWideViewPort: 'no',
hidenavigationbuttons: 'no',
footer: 'yes',
message: "Hello",
toolbar : 'yes',
location: 'yes'
}
);
}
In html:
<ion-button (click)="openPage()">Open Page</ion-button>
Related
I am new with ionic, I'm trying to integrate a google map in my application with ionic-native-googlemaps. In my browser it works fine but when I build for android or ios I have a blank page, and if I look at the console of google chrome at url chrome://inspect/device I don't have an error.
This is my typescript file
import {AfterViewInit, Component, OnInit} from '#angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '#ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '#ionic/angular';
#Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
And in my html file I have
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
I have searched for a solution everywhere but I have not found anything.
finaly i solve my problem, if someone have a same problem later,
just downgrade a version ionic-google maps and ionic core like this
"#ionic-native/core": "^5.24.0",
"#ionic-native/google-maps": "^5.0.0-beta.20",
After that look if your div with who contains google if is have a 500px height or more if it's ok, your map workly fine and you need to paid google map too.
you don't have to downgrade googleMap .
there is two way to solve this problem :
First you can put the tag DIV outside ion-content
<div id="map" style="height:100%;"></div>
<ion-content>
</ion-content>
OR you can add style css to put the content background transparant to overlaye the map screen.
In my case it was showing right on Android but no IOS. API key was ok. The map was there, under the html, but ion-content was not transparent.
Try adding this to your global scss or css file.
._gmap_cdv_ {
--background: transparent !important;
}
For iOS and Chrome, if your application has 'location' function. Apple is serious about location security aspect and Google Chrome is also somewhat serious about it. Hence:
Step 1. In your Mac enable 'Location Services' under 'Security and Privacy' :
Navigate to 'Settings'=>'Security & Privacy'=>Privacy Tab=>Select
Location Services ; click the padlock to make changes=>make sure
checkbox is checked for Google Chrome
Step 2. In Google Chrome go
to Settings=>privacy & Security=>make sure localhost:8100 is in the
'allowed' list=>click on it and on the next tab 'Reset permissions'
and select 'Allow' in the drop-down box for location property.
That should do it.
I am trying to take pictures from an Ionic 4 PWA application.
I read this docs from Ionic team and implemented all the proposed steps... (https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/)
The (weird) result can be seen in the picture below:
When the camera prompt seen in this picture is shown, Chrome console prints out an object called MediaStreamTrack with this values:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
proto: MediaStreamTrack
When I click in the button to take picture, I can see this message:
Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259
I have used the sample code the Ionic team presented in the docs:
export class Tab2Page {
photo: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
}
And...
<ion-content>
<img [src]="photo">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I changed everything in this code trying to figure out what is going wrong, but nothing seem to fix this behavyour.
Can anyone point me in the right direction?
My Chrome version is 79.0.3945.79
Thanks in advance.
I'm new to Ionic 4 and I'm trying to figure out if I'm doing something wrong, or if Ionic 4 just acts differently in this area. I have a very simple app that just has a few Ionic pages, and in the app.component.ts file I trigger some init logic in the platform.ready() call. I noticed this init code was fired on every page load when testing via ionic serve. Some code is below. I assume ionic serve is supposed to only reload the app when the code changes (and not on every navigation to a new page)? Maybe my navigation approach is causing the app to reload?
app.component.ts
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(async () => {
this.statusBar.styleDefault();
this.splashScreen.hide();
let time = new Date().toLocaleString();
console.log(`${time}: Platform is ready...dude`);
});
}
Simple navigation that loads various empty pages (and seems to trigger an app reload on every nav).
Home.page.html
<ion-content padding>
<h1>Home Page</h1>
<ul>
<li>HOME</li>
<li>login</li>
<li>profile</li>
<li>signup</li>
<li>accounts</li>
<li>admin</li>
</ul>
</ion-content>
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
{ path: 'account-detail/:id', loadChildren: './pages/account-detail/account-detail.module#AccountDetailPageModule' },
{ path: 'account', loadChildren: './pages/account/account.module#AccountPageModule' },
{ path: 'settlement', loadChildren: './pages/settlement/settlement.module#SettlementPageModule' },
{ path: 'signup', loadChildren: './pages/signup/signup.module#SignupPageModule' },
{ path: 'admin', loadChildren: './pages/admin/admin.module#AdminPageModule' },
];
Rookie mistake. I'm posting an answer in case anyone else stumbles into this.
My issue was the anchor tags. Obviously I'm unfamiliar with the angular router. Looks like if you provide a routerLink it will do what we'd expect from a "normal" SPA link (as opposed to reloading the app).
Updated Home Page
<ion-content padding>
<h1>Home Page</h1>
<ul>
<li><a [routerLink]="['/home']" routerDirection="root">HOME</a></li>
<li><a [routerLink]="['/login']" routerDirection="root">login</a></li>
<li><a [routerLink]="['/profile']" routerDirection="root">profile</a></li>
<li><a [routerLink]="['/signup']" routerDirection="root">signup</a></li>
<li><a [routerLink]="['/account']" routerDirection="forward">accounts</a></li>
<li><a [routerLink]="['/admin']" routerDirection="forward">admin</a></li>
</ul>
</ion-content>
I've followed the following steps to create an app:
ionic start ionic-maps blank
cd ionic-maps
ionic setup sass
ionic io init
ionic platform add android
bower install ngCordova
Added the following lines to index.html:
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Changed app.js to include ngCordova:
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
Installed the geolocation plugin:
cordova plugin add cordova-plugin-geolocation
app.js:
.state('app.location', {
url: '/location',
views: {
'menuContent': {
templateUrl: 'templates/location.html',
controller: 'LocationCtrl'
}
}
})
location.html:
<ion-view view-title="Search">
<ion-content>
<h1>Location: {{location}}</h1>
</ion-content>
</ion-view>
controllers.js:
.controller('LocationCtrl', function($scope, $state, $cordovaGeolocation) {
$scope.location = 'Waiting';
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
console.log(lat, lng);
$scope.location = lat + ' ' + lng;
}, function(error) {
console.log('Could not get location: ', error);
$scope.location = 'Could not get location: ' + error + ' :: ' + JSON.stringify(error);
});
})
If I open the /location endpoint in my phone's browser (using ionic serve) I'm shown my current location correctly. So far everything works as expected.
/platforms/android/AndroidManifest.xml has the following lines in it:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
I'm building the app using the new cloud package builder using ionic package build android. ionic package list shows that the build was successful.
I expected that I'll be asked for location permission while installing the app from apk. But I'm only asked for full network access. On visiting the /locations screen I get an error [object PositionError. json.stringify(error) is {} and Object.keys(error).length is 0.
Using navigator.geolocation.getCurrentPosition instead of $cordovaGeolocation.getCurrentPosition doesn't help.
alert(error.code) is 2 and alert(error.message) is application does not have sufficient geolocation permisions.
PS: I've ensured that GPS is enabled and it works on other apps.
Run cordova plugin add cordova-plugin-geolocation with --save option i.e. cordova plugin add cordova-plugin-geolocation --save so that the plugin gets added to config.xml.
Alt: adding "cordova-plugin-geolocation" to "cordovaPlugins" in package.json also solves the issue but has been deprecated.
I am working on a Facebook IFrame app and using FB.ui to display the permissions request dialog using the JS SDK.
Here is the code I`m using:
FB.ui(
{
method: 'stream.publish',
message: '',
attachment: {
name: 'תחרות התחפושות הגדולה של לגדול',
caption: '',
media: [{ 'type': 'image', 'src': 'http://www.p-art.co.il/ligdol_purim/logo.gif', 'href': 'http://apps.facebook.com/ligdolpurim/', 'width': '101', 'height': '84'}],
description: ('פורים 2011'),
href: 'http://apps.facebook.com/ligdolpurim/'
},
action_links: [
{ text: 'Ligdol Purim', href: 'http://apps.facebook.com/ligdolpurim/' }
],
user_prompt_message: 'פרסם את השתתפותך בתחרות'
},
function(response) {
alert(response.post_id);
});
}
A happy surprise is that the SDK knows to show the dialog only for the missing permissions (if any). The problem is that a new IE window pops up and then disappears before the dialog is shown inside an iframe.
I have tried several variations on this code I found all over the net and all of them give me this popup before showing the dialog.
I had not considered that in order to open a facebook lightbox, you actualy need to be on facebook. I was testing my IFrame outside facebook. When I began testing the app inside a page tab, I got the lightbox. Ya learn something new everyday.