Mobile back button closing app instead of back to previous page

Questions
1

Hi

I need to enable mobile back button to previous page instead of closing the application. Please provide your suggestions…

2

In v2 you need to enable pushState View’s parameter

1 Like
3

I also want to do that functionality but it does not work for me, I thought it was like this:

var theme = ‘auto’;
if (document.location.search.indexOf(‘theme=’) >= 0) {
theme = document.location.search.split(‘theme=’)[1].split(’&’)[0];
}

// Init App
var app = new Framework7({
root: ‘#app’,
theme: theme,
materialRipple :false,
materialPreloaderHtml : true,
pushState : true,

but it does not work

4

You need to change it to:

// Init App
var app = new Framework7({
    root: '#app',
    theme: 'auto', // iOS, md or auto
    touch: {
        materialRipple: false
    },
    materialPreloaderHtml: true,  // NOT sure about this setting
    view: {
        pushState: true
    }
});
2 Likes
5

I’m issuing the same problem, with f7 v.1.6.5 and cordova 6.2.

I would like to intercept the backbutton for closing a sidepanel or a modal, instead of closing entire app. Also I would like to go back when a new page is on the top, and the user press the back button (this is working).

When I press the backbutton with a modal or the sidepanel open I see it closing, then the app is suddenly closed too.

Following my app initialization:

// Framework7 App main instnce
var app = new Framework7({
    root: '#app', // App root element
    animateNavBackIcon: true, // for iOS dynamic navbar
    material: !isIos, // Enable material theme on everything except iOS
    init: false,
    pushState: true,
    swipePanel: 'left'
});

And now my callback:

document.addEventListener("backbutton", function (event) {

    event.preventDefault();

    if ($$('.panel-left').hasClass("active")) {
        app.closePanel();
        return false;
    } else if ($$('#selezione-comune').hasClass("modal-in")) {
        app.closeModal();
        return false;
    }

    return false;
}, false);

Any suggestions will be really appreciated.

Thanks a lot
g4b0

6

I have some redirect condition on index page, after enabling pushState the page not redirecting to dashboard at the same time its not returning any errors as well. Its simply on homepage itself.

	{
		path: '/',
		url: './index.html',
		name: 'home',
		on: {
			pageInit: function (event, page) {
				var app = page.app;
					var userinfo = app.form.getFormData('userinfo')
					if (userinfo == undefined) {
						app.router.navigate('/login/');
						return
					}
					if (userinfo.uid) {
						app.router.navigate('/dashboard/');						
					}
			},
		}
	}

In app.js i have below code.

var app = new Framework7({
	id: 'io.framework7.testingapp',
	root: '#app',
	theme: 'md',
	dialog: {
		title: 'Framework7',
	},
	view: {
		pushState :true,
		stackPages: true,            
	},
	routes: routes,
});
7

There is no sense to use such route redirection on page init. Use async route instead

8

Thanks for your reply @nolimits4web. I have achieved this functionality using navigator pluing on cordova.

9

@arulraj What plugin did you use?