一、什么是iframe？
iframe是html内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中。
主要属性如下：
| src | 被嵌套的页面的 URL 地址 |
| name | 框架名称文章来源：https://www.toymoban.com/news/detail-651451.html |
| scrolling | 否要在框架内显示滚动条。值; auto（仅当框架的内容超出框架的范围时显示滚动条）、yes、no |
| width | iframe的宽度 |
| height | iframe的高度 |
| frameborder | 值为1（默认值）时，显示此框架的边框。值为0时移除边框。 |
二、组件例子
下面以组件的的形式举例：文章来源地址https://www.toymoban.com/news/detail-651451.html
<template>
<div v-loading="loading" :style="{height: realHeight}">
<iframe
:src="url"
scrolling="auto"
frameborder="no"
style="width: 100%; height: 100%"
/>
</div>
</template>
<script setup>
const props = defineProps({
src: {
type: String,
required: true
}
})
const realHeight = ref(document.documentElement.clientHeight - 94.5 + "px;")
const loading = ref(true)
const url = computed(() => props.src)
onMounted(() => {
setTimeout(() => { loading.value = false; }, 100);
window.onresize = function (){
realHeight.value = document.documentElement.clientHeight - 94.5 + "px;";
};
})
</script>到了这里，关于vue3项目利用iframe展示其他页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
