解决OnsenUI单页面应用物理回退问题

前端之家收集整理的这篇文章主要介绍了解决OnsenUI单页面应用物理回退问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

物理回退,指通过手机按键中的“回退”键实现页面后退功能。在onsenUI单页面应用开发中,由于URL地址无变化,导致点击“回退”键直接退出微信内置浏览器(解决方法适用于浏览器、app、微信),那如何解决SPA中的物理回退问题呢?window.location.hash,通过创建监听事件postpush(页面加载之后),修改url链接中的hash值,使URL地址发生变化(由于hash值为#值,不影响微信JS-SDK授权)从而解决回退问题,以onsenUI为例,示例代码如下:

//调用回退
	setImmediate(function () {parseHashChange(mainNavi)});
	/**
	* 物理回退
	* @param mainNavi
	*/
	function parseHashChange(mainNavi){
		if(!mainNavi) return;
		mainNavi.on('postpush',function(event) {
		    //监听push后事件
		    //{index: 3,page: "../www/login/login.html"}
		    var pages = event.navigator.pages;
		    var pageName = event.enterPage.page;
		    console.log("pages:",pages);
		    console.log("pageName:",pageName);
		    var hash = {index:pages?pages.length:0,page:pageName};
		    console.log("hash:",hash);
		    window.location.hash = window.btoa(angular.toJson(hash));
		});
		mainNavi.on('prepush',function(event) {
		    //监听push之前的事件,
		});
		mainNavi.on('prepop',function(event) {
		    //监听pop之前的事件
		});
		mainNavi.on('postpop',function(event) {
		    //监听pop之后的事件
		});
		angular.element(window).on('hashchange',function(event){
		    //监听hashchange事件
		});
	}
原文链接:https://www.f2er.com/angularjs/148670.html

猜你在找的Angularjs相关文章