popstate_popstate 取消监听 - CSDN
精华内容
参与话题
  • popstate 监听app、浏览器的返回

    千次阅读 2018-12-27 21:11:41
    在实际开发中,遇到需要在当前web页面监听app、浏览器返回的情况,进过一顿搜索后,终于找到一种比较靠谱的方式! 下面话不多说,直接上代码: <!DOCTYPE html> &...initial-

    在实际开发中,遇到需要在当前web页面监听app、浏览器返回的情况,进过一顿搜索后,终于找到一种比较靠谱的方式!

    下面话不多说,直接上代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    	<title>popstate 监听返回</title>
    	<style type="text/css">
    	</style>
    </head>
    <body>
        
    	<div class="cat">应用场景一:监听当前页面返回</div>
        <div class="cat">应用场景二:监听第三方返回</div>
    	<a href="http://baidu.com">跳转到百度</a>
    	<script>
    	    window.onload = function(){
    	        pushHistory();
                setTimeout(function(){ //处理:部分机型加载页面时即会执行popstate事件的问题
                  /*popstate触发时机:当前历史条目为pushState创建时,事件被触发*/
                  window.addEventListener('popstate',function(event){
                        let state = event;
                        console.log(state);
                        alert(state + "-------------");
                  },false);
                },100);
    	    }
    	    /*pushState:往history添加历史条目
    	      state:状态对象,popstate事件触发时,该对象会传入回调函数  
              title:新页面标题(目前浏览器忽略该参数)
    	      URL:新的历史URL记录*/
    	    function pushHistory(){
    	        var state = {title: "呵呵哒",url: "#"};
    	        window.history.pushState(state,"新页面标题#","new_url");
    	    }
    	</script>
    </body>
    </html>

     

    展开全文
  • 一、popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api。 二、过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和state的两个值,在它的__proto__上继承有back、...

    一、popstate用来做什么的?
    简而言之就是HTML5新增的用来控制浏览器历史记录的api。

    二、过去如何操纵浏览器历史记录?
    window.history对象,该对象上包含有length和state的两个值,在它的__proto__上继承有back、forward、go等几个功能函数
    在popstate之前,我们可以利用back、forward、go对history进行后退和前进操作。
    例如:
    history.back(); (后退一步,使用history.go(-1)也可实现后退效果)
    弊端:只能操作前进后退,但是无法控制前进后要去哪,history.length都只会维持原来的状态

    三、popstate的怎么用?
    HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

    pushState、replaceState两者用法差不多。

    使用方法:

    history.pushState(data,title,url);
    //其中第一个参数data是给state的值;第二个参数title为页面的标题,但当前所有浏览器都忽略这个参数,传个空字符串就好;第三个参数url是你想要去的链接;
    

    replaceState用法类似,例如:history.replaceState("首页","",location.href+ "#news");

     

    两者区别:pushState会改变history.length,而replaceState不改变history.length

     使用场景重现:

    1.由于业务逻辑需要:打开我项目页面链接时,如果url中携带了指定参数,初始化进入页面的时候,就显示弹窗。

    2.页面中提供了一些其他链接的入口banner

    3.这样如果进入页面时携带了参数,点击其中banner时,跳转到其他页面,然后点击宿主的返回按钮,一般是会取之前历史记录里的。这时回到之前页面时,还是会打开弹窗,因为页面链接里还携带着参数

    4.解决办法,使用pushState方法,无刷新改变页面url 我只需要这样做:

          let lcthref=location.href.replace(/openMyPrize=true/g,"")
          console.log(lcthref)
          window.history.pushState("","",lcthref)

    就可以解决了。

    展开全文
  • 解决方案: 利用监听返回事件 window.addEventListener("popstate", function(e) {//你的逻辑}, false) 两种监听返回关闭方法: (1)需要微信授权 //当点击返回键时,不返回到上一页,而是直接关闭微信浏览器 ...

    需求:

    微信公众号开发的时候,可能会出现这种需求:

    微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件。

    解决方案: 利用监听返回事件 window.addEventListener("popstate", function(e) {//你的逻辑}, false)

    两种监听返回关闭方法:

    (1)需要微信授权

    //当点击返回键时,不返回到上一页,而是直接关闭微信浏览器
    function onBackCloseWindow() {
    	pushHistory();
        window.addEventListener("popstate", function(e) {
            //关闭当前浏览器 //关闭当前浏览器或跳转重定向页面
            wx.closeWindow();//需微信授权
        }, false);
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }   
    

    (2)无需微信授权

    //当点击返回键时,不返回到上一页,而是直接关闭微信浏览器
    function onBackCloseWindow() {
    	pushHistory();
        window.addEventListener("popstate", function(e) {
            //关闭当前浏览器或跳转重定向页面
            WeixinJSBridge.call("closeWindow");
        }, false);
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }   
    }
    

    关于部分安卓机使用手势返回/物理返回键监听不了的问题

    上面的代码在IOS中是没有问题的,但是在调试的时候发现部分安卓尽然监听不了popstate;

    关于此问题,微信社区也看到了,但是工作人员都没有给出一个满意的解决方案(直接搜一下popstate,会出现关于这个问题的讨论):


    然后也在网上搜一下这个问题(相关文章):


    粗略说一下网上大神们说的问题的根源:

    • 根源:微信的安全策略 / 微信浏览器内核
    • 解决办法:必须用户点击当前界面(真人交互界面)

    关于有人说引入了一些js就解决了(收费),各位大佬可以自行处理这个问题

    我的解决方法

    遇到这个问题挺束手无策的,当然最后也是解决了,大家可以参考一下

    解决: 既然说是要真人交互,那就在监听的界面,弹个窗(自定义的窗口),诱导 用户点击就行,此时如果安卓机使用物理返回啥的,就可以监听到了;

    不足:

    • 上面的方法是实在没辙的方法了,如果用户仍然不点击弹窗的话,直接按返回的话依然监听不了的;
    • 其次弹窗这个东西,并不是说加就加,需要跟产品商量,正巧我监听的那个界面可以弹个窗啥的还说的过去;

    上面的方法就是属于诱导性方法,如果大神们有找到好的方法也可以讨论讨论~

    展开全文
  • 问题如下: 页面监听返回事件 onpopstate 但是页面在打开时 没有任何操作 直接返回 回调没有执行 就直接退出了微信浏览器 如果用户点击了页面 监听就正常了 但是客户需要不用用户... 部分代码如下: ...titl...

        最近接到一个需求,在页面返回的时候需要跳转到指定的链接地址。这也没什么特别。但是做好测试的时候,发现在android设备有个物理/虚拟放回按键,这个返回直接就退出了浏览网页。点击页面中的返回是没问题的。经过各种折腾就是无法实现效果。

    问题如下:

        页面实现onpopstate监听返回事件,anroid设备返回按键点击不触发onpopstate事件。   

        部分代码如下:

        var balink="http://www.baidu.com";
    
        function pushHistory() {
    
            var state = {
    
                title: "上一页",
    
                url: balink
    
            };
    
            window.history.pushState(state, "title", "#")
    
        }
    
        $(function() {
    
            pushHistory();
    
            window.addEventListener("popstate", function(e) {
    
                if (balink != "") {
    
                    window.location = balink
    
                }
    
            }, false)
    
        });

        测试在火狐浏览器是可以触发popstate事件的

    尝试解决过程:

        1.尝试在网上找解决办法,发现还是有人也遇到了这些问题的,但是都没有解决办法

              

       

              

         

       测试发现,页面打开后,如果用户点击了页面有交互后,onpopstate事件监听就能正常触发,很奇怪。如果页面打开无任何操作,直接按android返回按钮。事件回调就没触发。直接退出了也退出了浏览器。

        但是客户需要的效果就是不用用户点击页面,也能监听返回并跳转到指定链接。

        有人说是什么浏览器的问题,有什么安全策略问题。应该都不是主要原因。

        2.然后想着自动触发页面body是否可能可以

             失败了,无效,不会触发onpopstate事件 

     

    最后查了下微信浏览器内核的相关资料。引入了一些东西,虽然是完美解决了返回的问题。但还是没完全弄明白原因。

    还在研究中,待续。。。。。。。。

    展开全文
  • popstate的bug解决方案

    千次阅读 2019-01-22 16:12:11
    在知乎里面看到一篇爝爷的文章,感觉很有用,赶紧那笔记下来!!! 首先,我们接到用户投诉,在某些网络运营商的网络下,某些android机型的浏览器中,访问我们的页面会有一些诡异的行为。 一,起因: ...
  • Created: Jul 30, 2020 10:48 AM Author: Liquorxm Tags: history, popstate, push...我们可以使用Web API提供的popState事件来处理这些情况,提到popState,应用中,通常pushState配合使用。 popState Usage window.a
  • H5中popstate事件的诡异行为

    千次阅读 2019-07-10 13:09:00
    前些天反复测试,发现了popstate事件的一个问题,当某些浏览器或者某些手机嵌入含有该代码的H5页面时,波多野结衣这个方法会执行两次! 一直很纳闷,按理来说这个监听事件(监听返回栈),应该是返回的时候再执行。...
  • popstate

    2018-03-27 16:20:27
    今天测试一个h5中的popstate事件,虽然我很久之前就对这个新属性有所学习, https://blog.csdn.net/zgrbsbf/article/details/25297359 无奈今天还是犯了几个小错误,记录如下: 错误: ...
  • 能用到这个需求的页面大部分估计都是黑五或黄赌 history.pushState(null, null, ...window.addEventListener("popstate",function(e) { console.log(e); history.pushState(null, null, document.URL); }, ...
  • popstate事件在webkit中的诡异行为

    千次阅读 2017-05-17 16:38:55
    1、背景:同事去学校做毕设请假,今天帮他修改h5bug 2、遇到的问题:移动端App打开某个网页...3、具体问题就是popstate造成的4、原来的代码:window.addEventListener('popstate', function() { var btnArray = ['我要
  • window.onpopstate无法触发解决办法

    万次阅读 2017-07-20 10:44:46
    window.onpopstate无法触发解决办法在微信浏览器中加入window.onpopstate监听事件,但是一直无法触发,后来查找网上资料,找到一个解决办法window.onpopstate = function(event) { console.log(sfa);...
  • popstate 事件, 浏览器返回事件

    千次阅读 2018-06-08 14:36:33
    popstate :浏览器返回事件当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的...
  • IOS微信浏览器返回事件popstate监听

    千次阅读 2018-01-18 17:28:37
    问题:通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微信,是会立即触发popstate事件...
  • 1、在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址),注意:IOS版的微信,是会立即触发popstate事件,所以需要pages...
  • window.addEventListener('popstate', function(evt) { var state = evt.state; console.log(state); var newTitle = ajax_Load(state.title); //你自定义的ajax加载函数,例如它会返回newTitle ...
  • 用ajax,pushState(),popstate实现浏览器前进后退页面局部刷新
  • 前段时间,因为项目需要,需要监听微信的返回按钮,于是用到了HTML5中的popstate,作为history系列中的事件,popstate在微信中存在这样一个问题:"当页面被加载的时候,...而根据官方文档对popstate的描述,只要访...
  • 1:history对象中的属性有length,state...也提供了监听事件:popstate,hashchange事件的监听 //监听浏览器url地址变化 window.onpopstate=function(){ //具体业务操作 } //监听hash值的变化,即描点的电话 window....
  • 知识点: 1、onpopstate事件,点击后退按钮(或者在JavaScript中调用history.back()方法)时触发; 2、hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写); 需求: ... 解决方案:
  • 监听浏览器后退事件

    千次阅读 2019-05-10 22:19:02
    监听浏览器后退事件(手机通过JS...本文将详细介绍如何利用浏览器自带的popstate事件监听浏览器返回事件,并跳转到指定位置 popstate The popstate event is fired when the active history entry changes. If th...
1 2 3 4 5 ... 20
收藏数 4,397
精华内容 1,758
关键字:

popstate