zoukankan      html  css  js  c++  java
  • js history对象 手机物理返回键

    有兴趣的可以了解下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(eventfunctionuseCapture);
    默认值 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";   //跳转到百度页面
        }
    });

    查看大神的例子

    作者:howtosay
             
    放牛娃的个人笔记整理,每天记录一点点,进步一点点
  • 相关阅读:
    Construction构造函数
    映射验证
    映射设置
    条件映射
    映射前和映射后的操作
    AutoMapper 5.0-升级指南
    Bootstrap Tree View
    MiniProfiler使用笔记
    关于添加数据自定义编号格式问题
    【Postgresql】数据库函数
  • 原文地址:https://www.cnblogs.com/hongzm/p/7427258.html
Copyright © 2011-2022 走看看