问题

当我们使用 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 = trueconst iframe = Iframe.value// 兼容处理if (iframe.attachEvent) {// IEiframe.attachEvent('onload', () => {loading.value = false})} else {// 非IEiframe.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>