1.在模态框中控制返回的按钮,点击返回应该关闭模态框
// 设置审批页面的历史记录,用于打开模态框点击返回时关闭模态框
function setApprovalHistory() {
modalInstance.dismiss("cancel");
window.removeEventListener("popstate", setApprovalHistory);
}
//模态窗口打开之后执行的函数
modalInstance.opened.then(function() {
// 打开模态框需要关闭上一个返回按钮监听事件
if (typeof(_goBack) != "undefined") {
window.removeEventListener("popstate", _goBack);
}
history.pushState(null, null, document.URL);
window.addEventListener("popstate",setApprovalHistory, false);
});
//点击确定回调函数
modalInstance.result.then(function (retValue) {
window.removeEventListener("popstate", setApprovalHistory);
if (angular.isFunction(callbackFunc)) {
callbackFunc();
}
}, function (reason) {//点击取消回调函数
window.removeEventListener("popstate", setApprovalHistory);
});
2.在基本信息页面中不断的切换tab,点击返回按钮,返回到列表页
function pushHistory() {
history.pushState(null, null, document.URL);
}
function _goBack() {
pushHistory();
window.location.href = document.referrer;
}
// 此部分代码在angularjs的controller中编写
// 延迟执行,避免页面一打开就开始监听
setTimeout(function() {
pushHistory();
window.addEventListener("popstate", _goBack, false);
},500);
// 页面销毁事件
$scope.$on('$destroy', function() {
window.removeEventListener("popstate", _goBack);
});
总结:1.在关闭页面之后需要销毁返回按钮的监听事件。2.如果是打开模态框,在模态框打开的时候销毁上一个页面的监听事件。3.每一个页面都要知道上一个页面的URL,且每一个页面都需要调用监听函数。
/**
* 最好不要使用document.referrer,因为你从基本信息页面切到列表页的时候,
* document.referrer记录的是基本信息页面的URL。
* 所以应该放需要跳转的具体页面的URL,这就需要自己手动构建好URL。
*/
function _goBack() {
pushHistory();
window.location.href = document.referrer;
}