zoukankan      html  css  js  c++  java
  • 微信开发,仿原生实现 “再按一次返回”功能

    方案原理

    利用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", "#");  
         }  
  • 相关阅读:
    实现可折叠的列表
    ajax知识点补充
    Ajax 完整教程
    从页面左边飞入页面动画效果
    文字闪烁
    点击按钮之后等待60秒
    [SCOI2016]萌萌哒
    [HNOI2011]卡农
    [NOI2015]寿司晚宴
    【bzoj 3489】A simple rmq problem
  • 原文地址:https://www.cnblogs.com/Life-Record/p/7443042.html
Copyright © 2011-2022 走看看