• 微信开发,仿原生实现 “再按一次返回”功能


    方案原理

    利用HTML5的window.history.pushState特性,例如 当从A页面进入时,先判断window.history.length==1那么调用window.history.pushState 写进一个空历史记录。并且监听返回键,当按下返回键时(我们是没办法阻止返回事件的,但由于上一个历史记录是空白的,所以的还是当前页面。),监听到返回事件 使用layer弹框插件提示,“您确定要返回微信吗?” 或者其他。点击【再逛逛】,则再次写入空白历史记录,点击【确定】或者再次点击【返回键】则关闭微信浏览器。

    方案代码

         if(window.history.length==1){//判断是第一次从微信菜单进入页面
             //写入空白历史记录
             pushHistory();  
    
         }
         
         //延时监听   
         setTimeout(function () {  
              //监听物理返回按钮  
              window.addEventListener("popstate", function(e) {  
                    
                       
                    layer.open({
                            content: '您确定要返回微信吗?',
                          
                            btn: ['确认', '再逛逛'],
                            shadeClose: false,
                        
                            yes: function(){
                                //调用微信浏览器私有API关闭浏览器
                                WeixinJSBridge.call('closeWindow');
                            }, no: function(){
                                //点击【再逛逛】,再次写入空白历史记录
                                pushHistory();
                            }
                    });
              }, false);  
          
           }, 300);  
            
         function pushHistory() {  
             var state = {  
                 title: "title",  
                 url: "#"  
             };  
             window.history.pushState(state, "title", "#");  
         }  
  • 相关阅读:
    poj 1634
    poj 2153
    POJ 1693
    poj 1789
    POJ 2676
    vue 路由
    用 node.js 创建第一个Hello World
    js原生Ajax 的封装和原理
    BFC原理
    怎么理解js的面向对象编程
  • 原文地址:https://www.cnblogs.com/Life-Record/p/7443042.html
Copyright © 2020-2023  润新知