<template>
    <div>
      <iframe :src='iframeSrc' class="iframe" ref="iframe"></iframe>
    </div>
</template>
<script>
export default {
  title: "title",
  // components: {},
  // data() {
  //   return {
  //     urlPath: this.getUrlPath() //iframe src 路径
  //   };
  // },
  computed: {
    iframeSrc() {
      let res =
        this.routerPath ||
        this.$route.params.src ||
        "http%3A%2F%2Fstatic.ws.126.net%2Ff2e%2Fwww%2Findex20170701%2Fimages%2Fsprite_img.svg%3F0619";
      return decodeURIComponent(res);
    }
  },
  created() {
    this.load();
  },
  mounted() {
    this.load();
  },
  props: ["routerPath"],
  // watch: {
  //   $route: function() {
  //     this.load();
  //   }
  //   // routerPath: function(val) {
  //   //   // 监听routerPath变化，改变src路径
  //   //   this.urlPath = this.getUrlPath();
  //   // }
  // },
  // components: {},
  methods: {
    // 显示等待框
    show() {},
    // 隐藏等待狂
    hide() {},
    // 加载浏览器窗口变化自适应
    resize() {
      window.onresize = () => {
        this.iframeInit();
      };
    },
    // 加载组件
    load() {
      this.resize();
      this.show();
      // console.log(this.$route.params.src);
      // this.$route.params.src = this.$route.params.src
      //   ? this.$route.params.src.replace("$", "#")
      //   : "";
      //超时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;
      if (!iframe) {
        return;
      }
      const clientHeight = document.documentElement.clientHeight - 120;
      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;
    //   console.log(url);
    //   url = url.replace("/myiframe", "");
    //   return "http://www.baidu.com";
    // }
  }
};
</script>
<style >
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>


