dy-admin-manager/src/layout/components/fullPageIns.vue

<template>
  <div class="contan">
    <iframe
      v-if="isShow"
      ref="iframe"
      :src="url"
      :width="iframeWidth"
      :height="iframeHeight"
      frameborder="0"
      allowfullscreen="true"
    ></iframe>
    <div class="iframeDiv" v-show="isResizing"></div>
    <videoView
      v-if="showVideo"
      @closeVideo="showVideo = false"
      :docY="docY"
      :videoSrc="videoSrc"
      @isResizing="
        (val) => {
          this.isResizing = val;
        }
      "
    ></videoView>
  </div>
</template>
<script>
import videoView from "./insVideo";
export default {
  components: {
    videoView,
  },
  data() {
    return {
      url: "",
      h: "",
      w: "",
      y: 130,
      docY: "",
      isShow: false,
      showVideo: false,
      isResizing:false,
      src:""
    };
  },
  mounted() {
    this.initSize();
    // this.y = 130;
    window.addEventListener("resize", this.resizeWindow);
    this.url = this.$route.query.url;
    this.isShow = true;
  },
  methods: {
    initSize() {
      this.docY =
        document.documentElement.clientHeight || document.body.clientHeight;

      this.h = this.docY - this.y;
      this.w = document.documentElement.clientWidth - 40;
      this.x = 210;
    },
    resizeWindow() {
      if (this.isShow) {
        this.isShow = false;
        this.initSize();
        this.$nextTick((res) => {
          this.isShow = true;
        });
      }
    },
  },
  computed: {
    // key() {
    //   console.log(this.$route);
    //   this.isShow = false;
    //   return this.$route.path;
    // },
    iframeWidth() {
      return this.w + "px";
    },
    iframeHeight() {
      return this.h - 30 + "px";
    },
    videoSrc(){
      return  this.src
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.$nextTick((res) => {
          let outFrame = this.$refs.iframe;
          let outFrameWindow = this.$refs.iframe.contentWindow;
          console.log(outFrame)
          setTimeout((res) => {
            let rightFrame = outFrameWindow.document.querySelector(
              "#mainFrame"
            );
            rightFrame.contentWindow.document.addEventListener(
              "click",
              (e) => {
                let path = (e.composedPath && e.composedPath()) || e.path || [];
                if (path.length > 0) {
                  for (let i in path) {
                    if (
                      path[i]?.getAttribute &&
                      path[i]?.getAttribute("title")
                    ) {
                      console.log(
                        "打开视频链接",
                        e.path[i].getAttribute("title")
                      );
                      this.src = e.path[i].getAttribute("title");
                      this.showVideo = true;
                      // this.isShow = false;
                      break;
                    }
                  }
                } else {
                  this.$message.error(
                    "该浏览器不支持,请更换或升级chrome浏览器"
                  );
                }
                console.log("点击了");
                this.showVideo = true;
                // let document
              },
              true
            );
          }, 500);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.contan {
  z-index: 2000;
  position: relative;
}
.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2000;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;

  top: 0;
  left: 0;
  /*display: none;*/
}
</style>