sl-sfy-safety/src/views/iframe/index.vue

<template>
  <LeftMenu>
    <VerticalFlexLayout>
      <template #static>
        <Breadcrumb />
      </template>
      <div class="frame" v-loading="loading">
        <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" :key="frameSrc"></iframe>
      </div>
    </VerticalFlexLayout>
  </LeftMenu>
</template>
<script lang="ts" setup>
  import { ref, unref, onMounted, nextTick, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import LeftMenu from '@/layout/components/left-menu/LeftMenu.vue';

  const currentRoute = useRoute();
  const loading = ref(false);
  const frameRef = ref<HTMLFrameElement | null>(null);
  const frameSrc = ref<string>('');

  watch(
    () => currentRoute.meta,
    (meta) => {
      frameSrc.value = unref(meta)?.frameSrc as string;
    },
    { immediate: true },
  );

  function hideLoading() {
    loading.value = false;
  }

  function init() {
    nextTick(() => {
      const iframe = unref(frameRef);
      if (!iframe) return;
      const _frame = iframe as any;
      if (_frame.attachEvent) {
        _frame.attachEvent('onload', () => {
          hideLoading();
        });
      } else {
        iframe.onload = () => {
          hideLoading();
        };
      }
    });
  }

  onMounted(() => {
    loading.value = true;
    init();
  });
</script>

<style lang="scss" scoped>
  .frame {
    width: 100%;
    height: 100%;

    &-iframe {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 0;
      box-sizing: border-box;
    }
  }
</style>