zoukankan      html  css  js  c++  java
  • onpopstate浏览器点击回退按钮时触发的事件

    1、onpopstate事件,点击后退按钮(或者在JavaScript中调用history.back()方法)时触发;

    2、hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写);

    需求:

    微信页面,在当前页面点击某处时,弹出一个覆盖整个手机屏幕的层,弹出这个层以后,点击微信屏幕的返回按钮时,隐藏弹出层,而不退出当前页面!

    解决方案:

    在点击事件发生的时候利用hash属性给URL加上锚点,展示弹出层,而点击返回按钮后,去掉URL锚点,隐藏弹出层;点击返回按钮将触发onpopstate事件;为什么要给URL加锚点?需求描述的所有操作都在同一个页面上,所以如果不在URL上添加锚点,点击展示弹出层后,用户点击微信返回按钮,将退出当前页面!

    $(".btn").click(function(){
          location.hash = "win";//给url加上锚点,此锚点会自动加载到url的 
          $(".window").show();
          $("#search").focus();
    });
    

      checkLocation方法检测URL上是否有锚点win,有锚点则展示弹出层,反之,则隐藏弹出层

    function checkLocation(){
            //hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
            if(location.hash.indexOf("#win")>-1){
                $(".window").show();
            }else{
                $(".window").hide();
            }
    }
    

      

    //popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).
     window.onpopstate = function() {
          checkLocation();
     };
    

      

    参考链接:https://blog.csdn.net/u012076852/article/details/51364857

  • 相关阅读:
    git添加本地项目到git
    GitLab项目迁移到Gerrit
    flask一些资料
    openldap sshkey & 用户自定义属性
    openldap复制
    openldap主机访问控制(基于用户组)
    openldap主机访问控制(基于ip)
    openldap自定义schema
    openldap主机访问控制(基于hostname)
    openldap权限sudo
  • 原文地址:https://www.cnblogs.com/tangbuluo/p/9341513.html
Copyright © 2011-2022 走看看