vue打开其他项目的页面/打开外部链接，window模态框或内嵌在项目里

写这篇文章的时候心情很emo，希望自己更强大吧

在项目里通过点击列表当前行，拿到每行的id之后，跳转到新页面打开外链或者以window模态框的形式在当前页打开，并且叉掉后不影响原来的页面。

一：在项目里以新页面的形式打开
先创建这个页面，路由选择隐藏

  @click="opennewview(it.id)"

window.location.origin可以拿到当前页面的URL的源,拼接好路径后，路由跳转的时候带到新页面

  opennewview(id) {
      let localurl = window.location.origin;
      let affairId = id;   
      let url =
        localurl +
        "/xxx/xxx/xxx.xx?xxx=xxxy&xxx=true&xxx=xxx&app=4&affairId=" +
        affairId;
      this.$router.push({
        path: "sys/officialtodo",
        query: { govurl: url },
      });
  
    },

在新页面中使用iframe，一定要给宽高

<template>
  <div>
    <iframe :src="govurl" frameborder="0" :height="screenHeight - 84"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      govurl: "",
      screenHeight: "",
    };
  },
  created() {
    this.govurl = this.$route.query.govurl;
  },
  mounted() {
    /** 窗口动态渲染 */
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      this.screenHeight = document.body.clientHeight;
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
iframe {
  display: block;
  background: white;
  border: none;
  width: 100vw;
}
</style>

二，以window模态框打开，不需要新建路由
import { IEVersion } from “@/utils/browser.js”;

  @click="opennewview(it.id)"

  mounted() {
    /** 窗口动态渲染 */
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      this.screenHeight = document.body.clientHeight;
    };
  },

 opennewview(id) {
      let localurl = window.location.origin;
      let affairId = id;
   
      let url =
        localurl +
        "/xxx/xxx/xxx.xx?xxx=xxxy&xxx=true&xxx=xxx&app=4&affairId=" +
        affairId;
      if (IEVersion() == -1 || IEVersion() == "edge") {
        window.showModalDialog = window.open(
          url,
          "ctpPopup" + new Date().getTime(),
          "top=0,left=0,scrollbars=yes,dialog=yes,minimizable=yes,modal=open,width=" +
            this.screenWidth +
            ",height=" +
            this.screenHeight +
            ",resizable=yes"
        );
      }
    },

browser.js对应代码

export function IEVersion(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
  if(isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if(fIEVersion == 7) {
      return 7;
    } else if(fIEVersion == 8) {
      return 8;
    } else if(fIEVersion == 9) {
      return 9;
    } else if(fIEVersion == 10) {
      return 10;
    } else {
      return 6;//IE版本<=7
    }
  } else if(isEdge) {
    return 'edge';//edge
  } else if(isIE11) {
    return 11; //IE11
  }else{
    return -1;//不是ie浏览器
  }
}