H5项目，点击 ‘x’ 按钮关闭当前页面

1.关闭当前页面，会最先想到window.close，但是由于window.close方法只使用于IE浏览器，对于H5项目，要根据userAgent判断客户端类型编写关闭方法。如图点击关闭按钮，关闭当前页面。

2.代码展示

html部分；这里使用的是vant组件库的navBar

 <van-nav-bar title="关注专家" v-if="mobile == 2" @click-left="onClickClose">
      <template #left>
        <img
          src="../assets/images/x2.png"
          alt=""
          style="width: 13px; height: 13px"
        />
      </template>
    </van-nav-bar>

js部分；

data() {
    return {
      mobile: 2,//判断是否显示navBar;1不显示；2显示
      WeiXin: '', //微信
      flag: true, //pc
    };
  },
  methods: {
    // 关闭当前页面
    onClickClose() {
      if (confirm('您确定要关闭本页吗？')) {
        var userAgent = navigator.userAgent;
        this.isWeiXin();
        this.isPc();
        if (this.WeiXin) {
          WeixinJSBridge.call('closeWindow');
        }
        if (!this.flag) {
          window.opener = null;
          window.open('about:blank', '_self', '').close();
        }
        if (
          userAgent.indexOf('Firefox') != -1 ||
          userAgent.indexOf('Chrome') != -1
        ) {
          window.location.href = 'about:blank';
        } else {
          window.opener = null;
          window.open('about:blank', '_self');
          window.close();
        }
      } else {
      }
    },
    isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.WeiXin = true;
      } else {
        this.WeiXin = false;
      }
    },
    isPc() {
      var userAgent = navigator.userAgent;
      let Agents = [
        'Android',
        'iPhone',
        'SymbianOS',
        'Windows Phone',
        'iPad',
        'iPod',
      ];
      for (let v = 0; v < Agents.length; v++) {
        if (userAgent.indexOf(Agents[v]) > 0) {
          this.flag = false;
          break;
        }
      }
    },
  },