做网站需要注意的风险,怎么在网站做推广和宣传,西部数码网站管理助手 301,爱网逛文章目录 问题分析1. 嵌入 Iframe2. 样式3. 源码 问题
当我们使用 Iframe 嵌入页面后#xff0c;会看到它只在小小的一部分进行展示#xff0c;如何让它铺满整个屏幕
分析
1. 嵌入 Iframe
templatediviframe :srcembeddedPageUrl width… 文章目录 问题分析1. 嵌入 Iframe2. 样式3. 源码 问题
当我们使用 Iframe 嵌入页面后会看到它只在小小的一部分进行展示如何让它铺满整个屏幕
分析
1. 嵌入 Iframe
templatediviframe :srcembeddedPageUrl width100% height600px frameborder0/iframe/div
/templatescript
export default {data() {return {embeddedPageUrl: https://example.com/embedded-page // 替换为需要内嵌的页面的URL};}
};
/script在上面的示例中我们创建了一个Vue组件利用标签将指定的URL页面嵌入到Vue应用中
2. 样式
templatediv classiframe-containeriframe :srcembeddedPageUrl classresponsive-iframe frameborder0/iframe/div
/templatestyle
.iframe-container {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;
}.responsive-iframe {width: 100%;height: 100%;
}
/stylescript
export default {data() {return {embeddedPageUrl: https://example.com/embedded-page // 替换为需要内嵌的页面的URL};}
};
/script在上面的示例中我们使用CSS样式来实现让嵌入的iframe自适应页面的宽高并铺满整个屏幕。.iframe-container类设置了固定定位并且铺满整个屏幕.responsive-iframe类设置了宽度和高度均为100%从而使得iframe可以根据父容器的大小进行自适应。
3. 源码
templatediv classcontainer1 v-loadingloadingiframe idmodle_iframe :keyikey refIframe :srcurl width100% height100% frameborder0 //div
/templatescript langts 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?projectId1595297518537670657structId1592065978097729537token52212e27-9f6a-47f6-b4aa-a7d21b9d636d}iframeLoad()
};onMounted(() {fetchData();
});
/scriptscript langts
export default {name: Model,
};
/scriptstyle scoped langless
.container1 {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;
}#modle_iframe {width: 100%;height: 100%;
}
/style
