手机点击返回出现弹窗,监听浏览器,手机返回键


效果:点击手机的返回键,出现一个自定义的弹窗(弹窗样式内容自己做),

  

  <script>
 
       //第一种
    jQuery(document).ready(function ($) {
                if (window.history && window.history.pushState) {
                    $(window).on('popstate', function () {
                        var hashLocation = location.hash;
                        var hashSplit = hashLocation.split("#!/");
                        var hashName = hashSplit[1];
                 if (hashName !== '') {
                            var hash = window.location.hash;
                            if (hash === '') {
                                document.getElementById("myModal").style.display = "block";
                            }
                        }
                    });
                    window.history.pushState('forward', null, './#forward');
                }
            });
  //第二种
  
    function pushHistory() {
                var state = {
                    title: "title",
                    url: "#"
                };
                window.history.pushState(state, "title", "#xx");
            }
            pushHistory();
            window.addEventListener("popstate", function (e) {
                console.log(e);
                document.getElementById("myModal").style.display = "block";
            }, false);
 
  //第三种
    
     pushHistory();
            window.addEventListener("popstate", function (e) {
                document.getElementById("myModal").style.display = "block";
            }, false);
            function pushHistory() {
                history.pushState({
                    page: 1
                }, "title 1", "#");
            }
 
    //第四种
  
    pushHistory();
            window.addEventListener("popstate", function (e) {
                // 返回弹窗
                document.getElementById("modalll").style.display = "block";
                //  或者是跳转到其他页面
                //  window.location = 'http://www.baidu.com';
            }, false);
            function pushHistory() {
                var state = {
                    title: "title",
                    url: "#"
                };
                window.history.pushState(state, "title", "#");
            }
 
 
    </script>

 !!!!!!!如果实验效果,点击一下屏幕,返回弹窗效果触发,这是再按返回,即可出来弹窗(用户往下滑时也可触发)!!!!!!!!!!!

 

注意:插入JQ

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM