效果:点击手机的返回键,出现一个自定义的弹窗(弹窗样式内容自己做),
<script>
//第一种
jQuery(document).ready(function ($) {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
document.getElementById("myModal").style.display = "block";
}
}
});
window.history.pushState('forward', null, './#forward');
}
});
//第二种
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#xx");
}
pushHistory();
window.addEventListener("popstate", function (e) {
console.log(e);
document.getElementById("myModal").style.display = "block";
}, false);
//第三种
pushHistory();
window.addEventListener("popstate", function (e) {
document.getElementById("myModal").style.display = "block";
}, false);
function pushHistory() {
history.pushState({
page: 1
}, "title 1", "#");
}
//第四种
pushHistory();
window.addEventListener("popstate", function (e) {
// 返回弹窗
document.getElementById("modalll").style.display = "block";
// 或者是跳转到其他页面
// window.location = 'http://www.baidu.com';
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
</script>
!!!!!!!如果实验效果,点击一下屏幕,返回弹窗效果触发,这是再按返回,即可出来弹窗(用户往下滑时也可触发)!!!!!!!!!!!
注意:插入JQ