In ionic InAppBrowser, I want a custom close button after loading the webpage.
After closing the browser with that custom button it should give toast in the app with message 'Thank You For Visiting Our Website'.
const browser = this.iab.create('exampleurl.com', '_blank', 'location=no,zoom=no');
The button close can be only modified in the native part of the plugin.It cannot be modified in the java/html/css level.
browser.on('exit').subscribe(event => {
//use toastcontroller
});
Related
Is there any way or any framework or any particular ionic component to implement this below kind of feature.
Here is what I want:
When I open the component for first time the pop over automatically appears over a button ( like we have page tour in websites ). On click on GOT IT it will dismiss.
Use the popover component (https://ionicframework.com/docs/api/popover) with
ionViewDidEnter(){ }
As the popover is most of the time triggered by a click, you'll need to use javascript to "fake" a click :
ionViewDidEnter(){
let element: HTMLElement = document.getElementById('button') as HTMLElement;
element.click();
}
And then you create your onClick() method for your button to present the popover.
In a tab based ionic 1.x app, I'd like to display a customized "goBackHome" button only when the <ion-nav-back-button> is not displayed.
How to detect is the <ion-nav-back-button> is displayed or not?
Here is the solution from here:
$rootScope.$on('$viewHistory.historyChange', function(e, data) {
$scope.isBackButtonShown = !!data.showBack;
});
Additionally, it might help:
App.js - custom text and icon. You can use $ionicConfigProvider.
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.backButton.previousTitleText(false).text('customText');
$ionicConfigProvider.backButton.icon('ion-ios-home');
})
Controller.js - force Ionic to display back button on certain page
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
Additionally resources:
Change/Hide ion-nav-back-button text
How can I change the back button title in ionic framework?
How to force Ionic display back button on certain page?
Ionic override all BACK button behaviour for specific controller
hiding back button in ionic, angularjs
Show side menu or back button conditionally
Hide with ng-hide/ng-show
Ionic - Conditionally Hiding Back Button
A working solution for the current Ionic release:
$rootScope.$on('$ionicView.beforeEnter', function(e, data) {
$scope.isBackButtonShown = data.enableBack;
});
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
I have this flow in my ionic app... login.html page(which is a "ion-view")->side-menu page(side-menu from ionic framework)->page2.html page(which is a "ion-view"). Now i want to implement "ion-nav-bar" with "ion-nav-back-button" in it. Normally when i want to go back from page2.html the app should sent me to side-menu page....instead, my app, sent me to login page. Seems like side-menu does not have "ion-view" in it and it is not recorded in app flow. Any suggestion how can i solve that ? thank you
There is no a state for side menu, you can not 'go back' to open side menu.
In the normal, for the login view, you should disable the state temporally. Then the app will not 'go back' to login view. You can do it like this:
$scope.doLogin = function () {
Auth.login($scope.loginData, function () {
console.log('login success');
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('home');
});
};
And you can also clear the view history of ionic to avoid going back with:
$ionicHistory.clearHistory();
$state.go('user.home');
I'm trying to build a mobile-safari/iphone web-app using jQuery code I already wrote for the desktop version of the app. The problem I'm having is that when my phone goes to sleep with the web-app running, when I wake it up (slide to unluck) the JavaScript event handlers no longer function. In this case meaning when I click on a link that used to perform an AJAX update via an onclick event it actually follows the link by opening the page in a new Safari window, breaking the appearance of the native iPhone app.
The code that stops working:
$(function() {
var ajaxLoad;
var ajaxClick = function(e) {
e.preventDefault();
e.stopPropagation();
$("body").load( $(this).attr("href"), ajaxLoad );
}
ajaxLoad = function() {
$(this).find("a").click( ajaxClick );
}
$("a").bind( "click", ajaxClick );
});
When the code works the result of the link will open in the web-app frame, when it breaks, the code will open in a new safari window, breaking the look of an actual app.
Not tested - but would it help to add 'return false' to the end of the ajaxClick function so that the link does not activate.