【前端】浏览器返回时关闭模态框

项目中遇到一个需求，模态框用物理返回键返回的时候，页面路由回退到了上一个页面，这里需要让模态框关闭即可，路由不变化，下面是我的实现方式：

module.exports = function () {
  return {
    $get: ['$rootScope', function ($rootScope) {
      const eventListener = {
        /**
         * 让传入的模态框响应浏览器返回按钮点击关闭
         * @description 主要的实现思路是利用history.pushState往历史记录栈手动压入一条空白记录（压入弹出都不会导致页面切换，类似hash变更，但是不会像hash一样改变url，同时压入的记录也可以使得forword变为空），并通过监听popstate事件来响应返回按钮点击操作（PS：该事件history.back history.forward history.go 都会触发，这里编程的时候注意即可，用户操作中只有前进后退，压入栈后前进就没掉了，相当于现在用户触发该事件只有回退这种情况）
         * @param {*} modal 传入的模态框引用
         * @param {string} type 如何关闭模态框,未传入关闭模态框关闭函数将根据此值决定如何关闭,默认remove
         * @param {*} modalCloseFunc 传入的模态框关闭函数，该参数存在的原因是具体的模态框关闭场景可能会有业务逻辑
         */
        prepareModalBack: function (modal, type = 'remove', modalCloseFunc) {
          if (!window.history.pushState) return
          if (!modal || !modal.remove) return console.error('prepareModalBack: [modal] is invalid')
          if (!~['remove', 'hide'].indexOf(type)) return console.error('prepareModalBack: [type] is invalid')

          const backModal = modal
          const backAction = type
          const backModalCloseFunc = modalCloseFunc
          // 添加一条空白的历史记录到history对象中
          window.history.pushState({}, '')
          // 移除已有的popstate事件监听器(做一层保险)
          window.removeEventListener('popstate', window.backClickListener, false)
          // 响应浏览器返回按钮点击的回调函数
          window.backClickListener = function () {
            backModalCloseFunc ? backModalCloseFunc() : backModal[backAction]()
            window.removeEventListener('popstate', window.backClickListener, false)
            window.backClickListener = null
          }
          // 绑定popstate事件的监听器
          window.addEventListener('popstate', window.backClickListener, false)
        },
        /**
         * 不通过浏览器返回按钮回退的操作需要在退出函数中运行该方法，移除prepareModalBack加入history的空白记录，避免出现需要返回2次的问题
         */
        endModalBack: function() {
          if (!window.history.pushState) return

          window.removeEventListener('popstate', window.backClickListener, false)
          window.backClickListener = null
          window.history.go(-1)
        }
      }
      return eventListener
    }
    ]
  }
}

使用

const angular = require('angular')
const modalFunc = require('./modalFunc')

/* Services */
module.exports = angular.module('project.utils', [])
  .provider('$$modalFunc', modalFunc)
  .service('$utils', ['$$modalFunc', function ($$modalFunc) {
      return {
        $modalFunc: $$modalFunc
      }
    }
  ])

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/248d3f9e.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！