1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
  <basic-container>
    <iframe :src="src"
            class="iframe"
            ref="iframe"></iframe>
  </basic-container>
</template>
 
<script>
  import {mapGetters} from "vuex";
  import NProgress from "nprogress"; // progress bar
  import "nprogress/nprogress.css"; // progress bar style
  export default {
    name: "AvueIframe",
    data() {
      return {
        urlPath: this.getUrlPath() //iframe src 路径
      };
    },
    created() {
      NProgress.configure({showSpinner: false});
    },
    mounted() {
      this.load();
      this.resize();
    },
    props: ["routerPath"],
    watch: {
      $route: function () {
        this.load();
      },
      routerPath: function () {
        // 监听routerPath变化，改变src路径
        this.urlPath = this.getUrlPath();
      }
    },
    computed: {
      ...mapGetters(["screen"]),
      src() {
        return this.$route.query.src
          ? this.$route.query.src.replace("$", "#")
          : this.urlPath;
      }
    },
    methods: {
      // 显示等待框
      show() {
        NProgress.start();
      },
      // 隐藏等待狂
      hide() {
        NProgress.done();
      },
      // 加载浏览器窗口变化自适应
      resize() {
        window.onresize = () => {
          this.iframeInit();
        };
      },
      // 加载组件
      load() {
        this.show();
        var flag = true; //URL是否包含问号
        if (this.$route.query.src !== undefined && this.$route.query.src.indexOf("?") === -1) {
          flag = false;
        }
        var list = [];
        for (var key in this.$route.query) {
          if (key !== "src" && key !== "name" && key !== "i18n") {
            list.push(`${key}= this.$route.query[key]`);
          }
        }
        list = list.join("&").toString();
        if (flag) {
          this.$route.query.src = `${this.$route.query.src}${
            list.length > 0 ? `&list` : ""
          }`;
        } else {
          this.$route.query.src = `${this.$route.query.src}${
            list.length > 0 ? `?list` : ""
          }`;
        }
        //超时3s自动隐藏等待狂，加强用户体验
        let time = 3;
        const timeFunc = setInterval(() => {
          time--;
          if (time === 0) {
            this.hide();
            clearInterval(timeFunc);
          }
        }, 1000);
        this.iframeInit();
      },
      //iframe窗口初始化
      iframeInit() {
        const iframe = this.$refs.iframe;
        const clientHeight =
          document.documentElement.clientHeight - (screen > 1 ? 200 : 130);
        if (!iframe) return;
        iframe.style.height = `${clientHeight}px`;
        if (iframe.attachEvent) {
          iframe.attachEvent("onload", () => {
            this.hide();
          });
        } else {
          iframe.onload = () => {
            this.hide();
          };
        }
      },
      getUrlPath: function () {
        //获取 iframe src 路径
        let url = window.location.href;
        url = url.replace("/myiframe", "");
        return url;
      }
    }
  };
</script>
 
<style lang="scss">
  .iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
</style>