问题

当我们使用 Iframe 嵌入页面后，会看到它只在小小的一部分进行展示，如何让它铺满整个屏幕

分析

1. 嵌入 Iframe

<template>
  <div>
    <iframe :src="embeddedPageUrl" width="100%" height="600px" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      embeddedPageUrl: 'https://example.com/embedded-page' // 替换为需要内嵌的页面的URL
    };
  }
};
</script>

在上面的示例中，我们创建了一个Vue组件，利用标签将指定的URL页面嵌入到Vue应用中

2. 样式

<template>
  <div class="iframe-container">
    <iframe :src="embeddedPageUrl" class="responsive-iframe" frameborder="0"></iframe>
  </div>
</template>

<style>
.iframe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.responsive-iframe {
  width: 100%;
  height: 100%;
}
</style>

<script>
export default {
  data() {
    return {
      embeddedPageUrl: 'https://example.com/embedded-page' // 替换为需要内嵌的页面的URL
    };
  }
};
</script>

在上面的示例中，我们使用CSS样式来实现让嵌入的<iframe>自适应页面的宽高并铺满整个屏幕。.iframe-container类设置了固定定位，并且铺满整个屏幕，.responsive-iframe类设置了宽度和高度均为100%，从而使得<iframe>可以根据父容器的大小进行自适应。

3. 源码

<template>
  <div class="container1" v-loading="loading">
    <iframe id="modle_iframe" :key="ikey" ref="Iframe" :src="url" width="100%" height="100%" frameborder="0" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue';
const ikey = new Date().getTime() // 使用时间戳
const Iframe = ref()
const loading = ref(false)

function iframeLoad() {
  loading.value = true
  const iframe = Iframe.value
  // 兼容处理
  if (iframe.attachEvent) {
    // IE
    iframe.attachEvent('onload', () => {
      loading.value = false
    })
  } else {
    // 非IE
    iframe.onload = () => {
      loading.value = false
    }
  }
}
const url = ref()
const fetchData = () => {
  if (!url.value) {
    // ikey.value = new Date().getTime() // 使用时间戳
    url.value = 'http://localhost:9001/#/home?projectId=1595297518537670657&structId=1592065978097729537&token=52212e27-9f6a-47f6-b4aa-a7d21b9d636d'
  }
  iframeLoad()
};

onMounted(() => {
  fetchData();
});
</script>

<script lang="ts">
export default {
  name: 'Model',
};
</script>

<style scoped lang="less">
.container1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

#modle_iframe {
  width: 100%;
  height: 100%;
}
</style>