文章目录
- 问题
- 分析
- 1. 嵌入 Iframe
- 2. 样式
- 3. 源码
问题
当我们使用 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>