js history对象 手机物理返回键

Posted 2020-10-04 how-to-say-how-to-do

有兴趣的可以了解下history对象，不感兴趣也可以直接跳到手机物理返回键监听部分

使用场景：

　　场景1：项目中一个表单页面，需得填写验证码，填写验证码后提交，由于使用的form直接提交，没有使用AJAX，所以，在出现验证码填写错误的时候，就会跳转到错误提示页，3秒倒计时后使用history.back(-1)的方式返回上一页，这也就出现了一个问题，使用history.back(-1)进行后退之后，图形验证码已过期，但是却没有刷新，这样就导致用户重复多次填写验证码，影响用户体验；

　　场景2：关注公众号，第一次访问必须先绑定，绑定后才能进入系统；如果已经绑定直接可以进入系统，不会出现绑定页面；而且一个手机号只能绑定一个用户；如果用户刚绑定成功，进入系统页面后，直接按返回，这时，明明手机已绑定，但用同一手机号还是会出现绑定页面，这时虽然可以在点绑定时候去增加判断手机号是否已经绑定，但体验效果不如如果手机已经绑定，绑定页面就不会出现的效果；

******************html4【history对象】有length属性，go()/back()/forward()跳转方法****************************

我们要了解浏览器的history对象， history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起；history.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length属性等于3；history对象提供了一系列方法，允许在浏览历史之间移动，包括go()、back()和forward()。

【go()】方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。

go(负整数)：表示向后跳转(类似于后退按钮)

go(正整数)：表示向前跳转(类似于前进按钮)

示例：

　　

go()方法无参数时，相当于history.go(0)，可以刷新当前页面

示例：

　　

【back()】

back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)

【forward()】

forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)

示例：

　　

如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

【注意】使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页

 

********************监听手机物理返回键************************************

示例：

A页面跳到B页面，监听B页面返回键，并做相应操作，那么就可以在B页面javascript脚本写如下监听事件

pushHistory();

function pushHistory(){　　//刚一进到B页面就往history历史记录pushstate一个url

　　var state = {
　　　　title:"title",　　//可以传空值""

　　　　url:"#"};

　　window.history.pushState(state,"title","#");

}

window.addEventListener("popstate",function(e){　　//只要B页面按下手机物理返回键，就会被监听到

　　//该干嘛干嘛

　　WeixinJSBridge.invoke(\'closeWindow\',{},function(res){});　　//js代码关闭微信端当前网页

　　//window.location = "http://www.baidu.com";　　//跳转到百度页面

},false);

或者

$(function(){
　　window.history.pushState("","","#");
})
window.addEventListener("popstate",function(e){
　　//该干嘛干嘛
})

另外一种方法（没有测试）：微信端返回按钮返回到上一页，上一页页面不刷新问题

window.onpageshow = function(event){

　　if(event.persisted){

　　　　window.location.reload();

　　}

}

以上代码就搞定监听手机物理返回键并作处理，下面有兴趣的可以了解

 

大家都知道在浏览器页面中，可以在不知道实际URL的情况下实现后退和前进，但是由于安全方面的考虑，开发人员无法得到用户浏览器的URL也没办法修改history里已有的url链接；

HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录（两个方法使用方法都一样，不同的是pushState会改变history对象length属性，而replaceState不会）。

pushState（相当于进栈）可以往history里增加url链接，popState（相当于出栈）事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以对popState进行监听。

【注意】

popState事件当同一个文档的history发生变化时，就会触发popState事件；

需要注意的是，仅仅pushState和replaceState不会触发该事件，只有用户点击浏览器的前进、后退按钮才会触发，或者使用javascript调用go()/back()/forward()才会触发，因为这些操作都可以改变history栈中的当前指针；另外该事件仅针对同一个文档有效，如果浏览器历史的切换，导致加载不同的文档，也不会触发该事件。

 

//无刷新页面切换：使用到如下API

【history.state】:当前url对应的状态信息

如果当前url不是通过pushState或者replaceState产生的，那么history.state就为null；

【history.pushState(state, title, url)】：将当前的url和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新；

state：与要跳转的URL对应的状态信息

title：传空字符就可以

url：要跳转到的地址，不能跨域（跨域会报错）

【history.replaceState】：用新的state和URL替换当前的，不会造成页面刷新；

state：与要跳转的URL对应的状态信息

title：传空字符就可以

url：要跳转到的地址，不能跨域（跨域会报错）

【window.onpopstate】

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当

前的URL和history.state。通过event.state也可以获取history.state。

 

【往返缓存】

默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面；浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件

 

addEventListener()方法，事件监听(removeEventListener()方法移除设定的监听事件)

语法：element.addEventListener(event,function,useCapture);

参数：

　　element:文档节点、document、window 或 XMLHttpRequest

　　event:事件类型，如"click" 或 "mousedown"

　　function:事件触发后调用的函数或者是实现了EventListener接口

　　useCapture:布尔值，用于描述事件是冒泡还是捕获，参数可选，默认false（冒泡）

注意：event不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"

示例：　

element.addEventListener("click", function(){ alert("Hello World!"); });
等效

element.addEventListener("click", myFunction);

function myFunction() {

 　　alert ("Hello World!");
}
向window对象添加事件

window.addEventListener("resize", function(){

　　document.getElementById("demo").innerHTML = sometext;

});

事件冒泡还是捕获？

事件传递方式有两种：冒泡、捕获、

事件传递定义了元素触发的顺序，如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

示例：

document.getElementById("myDiv").addEventListener("click", myFunction, true);

【removeEventListener()方法】

element.removeEventListener("mousemove", myFunction);

【浏览器兼容处理】
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
} 
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

*****************************

 //手机端弹窗

$.pop.showAlert({
　　content: "提示的信息",

　　yes:function(){　　//点确定之后执行的事件
　　　　window.location.href = "http://www.baidu.com"; 　　//跳转到百度页面
　　　　}
});

查看大神的例子