精华内容
下载资源
问答
  • 监听浏览器后退事件

    千次阅读 2019-05-10 22:19:02
    监听浏览器后退事件(手机通过JS监听返回按钮事件) 在开发过程中我们经常遇到需要自定义返回按钮跳转到指定位置,而并非按照历史纪录一级一级向后跳转 本文将详细介绍如何利用浏览器自带的popstate事件监听浏览器...

    监听浏览器后退事件(手机通过JS监听返回按钮事件)

    在开发过程中我们经常遇到需要自定义返回按钮跳转到指定位置,而并非按照历史纪录一级一级向后跳转

    本文将详细介绍如何利用浏览器自带的popstate事件监听浏览器返回事件,并跳转到指定位置

    popstate

    The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event’s state property contains a copy of the history entry’s state object.

    Note that just calling history.pushState() or history.replaceState() won’t trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

    Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn’t.

    上面这段内容是MDN Web docs 对popState事件的说明,翻译过来为:

    当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

    需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

    不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

    总结来说:

    popstate事件只有浏览器返回按钮以及history.back()事件更改历史记录时触发,hhistory.pushState()或history.replaceState()事件不会触发popstate事件

    使用方法

      if (window.history && window.history.pushState) {
        window.onpopstate = function() {
          //后退按钮触发事件
        }
      }
    

    Vue实例

    在浏览器开发中,实际上我们必不能真正的监听到浏览器自带的后退按钮事件,移动开发中,不同过封装程序,我们也不能单纯的通过js代码监听到手机的后退按钮事件。此处我们通过监听浏览器history的改变结合vuex-store实现模拟监听浏览器后退按钮的效果

    1.在store中定义浏览器后退事件(用于判断当前后退事件是否有其他操作)

    import Vuex from 'vuex'
    import Vue from 'vue'
    Vue.use(Vuex)
    var state = {
      backEvent: null
    },
    getters = {
      backEvent(state,getters){
        return state.backEvent
      }
    },
    mutations = {
      backEvent(state,val) {
        state.backEvent = val
      }
    };
    export default new Vuex.Store({
      state,
      getters,
      mutations
    })
    

    2.在App.vue中监听history的变化

    export default {
      computed:{
        backEvent() {
          return this.$store.getters.backEvent;
        }
      },
      mounted() {
        var that = this;
        if (window.history && window.history.pushState) {
          window.onpopstate = function() {
            if(that.backEvent){
              that.backEvent()
              that.$store.commit('backEvent',null)
            }
          }
        }
      }
    }
    

    缺点:

    1.popState仅仅是监听history改变,并不能阻止浏览器的后退事件。即:无论我们在backEvent中做了何种处理,路由实际上是发生了更改的,当前页面也进行了重新加载。

    本文实例也可通过监听vue-router实现同样效果,且无上述缺点

    展开全文
  • 微信浏览器后退事件

    2018-09-06 17:09:00
    *监听浏览器的后退事件 *场景:苹果微信浏览器后退按钮 */ function winBack(){ window.onpopstate = function(event) { // alert('退出页面') window.location.reload() }; //加入以下俩行代码,...
    /**
     *监听浏览器的后退事件
     *场景:苹果微信浏览器后退按钮
     */
    function winBack(){
        window.onpopstate = function(event) { 
            // alert('退出页面')
            window.location.reload()
        };  
        //加入以下俩行代码,才能触发 onpopstate事件
        window.history.pushState('forward', null, '#'); 
        window.history.forward(1);
    }

    苹果的微信浏览器是比安卓多出一个底部导航栏的,如果是做微信H5的通常要先跳公众号授权,再进H5页面,所以导航栏就出现了,如果在H5页面按后退箭头的话,就会出现空白的授权页面,所以用上面的方法监听后退的事件可以解决。

    转载于:https://www.cnblogs.com/haqiao/p/9599619.html

    展开全文
  • 模拟浏览器后退事件

    2016-12-29 16:03:00
    但浏览器并没有后退事件,这个项目也没有用什么 MV** 之类的框架或库,用的是 jQuery,于是只能尝试模拟浏览器后退事件。 用的是 H5 中的 pushState 与popstate,代码如下: var onBrowserBack = function(...

          在工作中碰到一个需求:点击浏览器的后退按钮时,需要判断当前页面的表单数据是否已保存;如果没保存,就给出提示。但浏览器并没有后退事件,这个项目也没有用什么 MV** 之类的框架或库,用的是 jQuery,于是只能尝试模拟浏览器后退事件。

          用的是 H5 中的 pushState 与 popstate,代码如下:

    var onBrowserBack = function(callback) {
      var userAgent = navigator.userAgent.toLowerCase(),
          isSafari = userAgent.indexOf('safari') > -1 && userAgent.indexOf('chrome') < 1,
          referrer = document.referrer;
    
      if (window.history && window.history.pushState) {
        if (isSafari) {
          window.onload = function() {
            window.isLoaded = 'isLoaded';
          };
        }
    
        history.pushState('historyPushState', null, null);
    
        window.onpopstate = function(event) {
          history.pushState(null, null, null);
    
          if (window.isLoaded === 'isLoaded') {
            window.isLoaded = '';
          } else {
            if (history.state === 'historyPushState') {
              history.forward(); // 自动“前进”一步,否则“前进”按钮可点击
            } else {
              if (typeof callback === 'function' && callback(event) !== false) {
                window.location.href = referrer;
              }
            }
          }
        };
      }
    };

          popstate 事件会在用户点击浏览器(Chrome, Firefox, Safari)的“前进”和“后退”按钮时触发,但在 Safari 中还多一种触发的情况 ── load 页面时也会触发,例如由其它页面跳转过来,以及刷新。因此,需要在 Safari 中排除这种情况,代码里用的是浏览器的用户代理来检测 Safari。

          调用:

    onBrowserBack(function() {
      console.log('popstate');
      
      // 自定义跳转到其它链接
      window.location.href = 'https://www.baidu.com';
      return false;
    });

          如果要跳转到其它页面,需要用 js 手动跳转。

          这种模拟方式的问题在于,没法点击“前进”按钮;并且,“后退”按钮只能回退到前一步,如果再点,就又回到了当前页面(使用了 onBrowserBack 的页面)。

    转载于:https://www.cnblogs.com/caihg/p/6233450.html

    展开全文
  • JS监听浏览器前进后退事件

    千次阅读 2019-07-03 14:44:31
    if (window.history && window.history.pushState) { //监听浏览器前进后退事件 $(window).on('popstate', function () { //do something... }); }
    if (window.history && window.history.pushState) {
        //监听浏览器前进后退事件
        $(window).on('popstate', function () {
            //do something...
        });
    }

     

    展开全文
  • s 监听后退事件及跳转页面 //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window.history.go(-1); jq监听后退事件 <script type="text/...
  • 开发过程中发现router和history都不会提供后退事件标识,并且很多时候我们并不想要后退历史,而是后退页面层级。 并且在页面跳转过程中如果使用go(-1),back()这种事件还容易出现循环后退这种场景。如:z-&gt;a-...
  • //拦截后退事件和控制弹窗 var intercept = { //阻止拦截的方法 closeTots: function (a){ if(a) closeCur = false; return closeCur; }, //添加浏览器历史记录 pushH...
  • 浏览器后退事件

    2017-10-24 17:10:49
    $(document).ready(function(e) { var counter = 0; if (localStorage.lastname != "test") { localStorage.lastname="test"; if (window.history && window.history.pushState) {
  • 监听浏览器回退事件,主要依赖于监听:window的popstate事件,因为浏览器在被点击“后退”或者“前进"按钮时,都会触发popstate事件。因此,可以在 window.on('popstate', function(){ // to do }) 2.window的push...
  • 代码如下: $(function(){ //处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 function banBackSpace(e){ var ev = e || window.event;//获取event对象 var obj = ev.target || ev.srcElement;/
  • 在做报表开发时遇到问题:由第一层数据下钻到下一层,是在一个文件中开发,通过显示隐藏来控制,下钻到第二层后通过返回按钮来返回第一层,现根据业务需求调整,不能显示返回按钮,需通过浏览器的后退来返回到数据的...
  • $(function () { // 捕捉后退 $(document).ready(function (e) { window.history.pushState('forward', null, '#'); window.history.forward(1); if (window.history && wind...
  • 开发过程中经常遇到这种情况:页面不允许返回到上一页面或者需要转到指定页面,这时候我们就需要监听到浏览器后退事件,从而将它的浏览历史记录删除,然后转向你指定的URL。 具体执行过程如下: $(function(){ //清空...
  • js禁用后退事件

    2018-06-22 16:49:00
    //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); 转载于:...
  • <html>  <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8">  <title>onhashchange测试</title></head>  <body>.../a&
  • Android后退事件处理

    2017-08-11 10:33:55
    public long lastClickTime = 0; public void onBackPressed(){ if(lastClickTime ){ Toast.makeText(this, "再按一次退出程序", 1).show(); lastClickTime = System.currentTimeMillis();...
  • phonegap后退事件

    2013-06-14 13:49:38
    1 navigator.notification.confirm(  '确定退出么',  function(button)  {  if(button==1)  {  navigator.app.exitApp();    }    },    '
  • 一: 事件: ...//禁用回车 后退事件 document.onkeydown = function () { if (window.event && (window.event.keyCode == 13 || window.event.keyCode== 8)) { window.event.ret...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,366
精华内容 546
关键字:

后退事件