Vue中实现检测当前是否为IE模式(极速模式还是兼容模式)

刺骨的言语ヽ痛彻心扉 2023-10-02 02:55 14阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][BADAO_LIUMANG_QIZHI_-CSDN]

在上面搭建起来的Vue前端项目中，实现对接海康威视摄像头时，设备需要IE(兼容模式)才能进行预览。

怎样判断当前是否为IE或者兼容模式。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客][BADAO_LIUMANG_QIZHI_CSDN]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、在主页面中实现点击按钮，在新标签页中打开

<el-button
              type="success"
              plain
              icon="el-icon-setting"
              size="mini"
              @click="checkCompat"
              >检测是否是IE兼容模式</el-button
            >

2、配置路由跳转，打开src下router下的index.js

{
        path: '/checkIE',
        component: Layout,
        component: (resolve) => require(['@/views/system/cameramap/component/checkIE'], resolve),
        meta: {title: 'checkIE'},
        hidden: true,
      }

3、按钮点击事件中在新的标签叶中打开

checkCompat(){
           window.open("/checkIE", "_blank");
        },

4、在新的页面中获取请求代理

data() {
        return {
             ua: navigator.userAgent.toLocaleLowerCase(),
        };
      },

5、在新页面的created方法中判断是否为IE

created() {
        if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) {
          this.browserType = "IE";
          this.$notify({
            title: "成功",
            message: "当前为ie模式",
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: "请在ie模式下查看摄像头",
            type: "error",
          });
        }
      },

6、效果

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![Image 1][]

[BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2699a3df8b384b50a609cd86fe0db5f0.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f8b9efa67cfd447bafc9fbdb76b48fe2.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/7a97dc7b0eeb4dedb685455bf78a6e9a.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[Image 1]: