zoukankan      html  css  js  c++  java
  • 监听微信端,手机端,ios端的浏览器返回事件,pc端关闭事件

    直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持

    当进入该页面,我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时,就进行监听,在监听代码中实现自己操作

    window.addEventListener("popstate", function(e) {  
            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
        }, false); 

    虽然我们监听到了后退事件,但是页面还是会返回上一个页面,所以我们需要使用pushState增加一个本页的url,代表本页,大家都非常清楚是#

    function pushHistory() {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
        }  

    当进入该页面,我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时,就进行监听,在监听代码中实现自己操作。

    下面是完整的代码:

    $(function(){  
        pushHistory();  
        window.addEventListener("popstate", function(e) {  
            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
    }, false);  
        function pushHistory() {  
            var state = {  
                title: "title",  
                url: "#"  
            };  
            window.history.pushState(state, "title", "#");  
        }  
          
    });

    1.在微信中进入页面就触发了popstate事件。

    解决方法:定义boolean 变量bool=false。在页面加载后,采用setTimeout方法设置1.5s的超时,在超时执行方法中设置bool=true。

    在popstate监听当中增加对bool的判断,当bool=true时,执行内容。具体代码如下:

    $(function(){  
                pushHistory();  
                var bool=false;  
                setTimeout(function(){  
                      bool=true;  
                },1500);  
                window.addEventListener("popstate", function(e) {  
                  if(bool)  
                    {  
                            alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
                    }  
                    pushHistory();  
                      
            }, false);  
            });  
  • 相关阅读:
    前后端交互, 安装drf, restful接口规范, pycharm断点调试
    django中文设置, axios, CORS, 全局js配置, Vue配置jq + bs
    js原型, Vue项目环境搭建, Vue项目目录结构, Vue项目生命周期, 小组件使用, 全局样式, 路由跳转, 组件的生命周期钩子, 路由传参
    Vue组件
    Vue表单指令, 条件指令, 循环指令, 成员
    question1 赋值运算操作符
    CH15 面向对象程序设计
    CH12 动态内存
    CH11 关联容器
    CH10 泛型算法
  • 原文地址:https://www.cnblogs.com/qq735675958/p/7427141.html
Copyright © 2011-2022 走看看