Vue中 iframe 的内容加载慢,实现加载(Loading)效果
需求:由于 iframe 的内容加载较慢,需要在加载完成前添加 loading 效果。本文 loading 使用的是 Element 框架的加载(Loading)组件。功能实现完整代码<template><div style="height:1000px;" v-loading="loading"><iframeref="Iframe"src="https://www
·
需求:
由于 iframe 的内容加载较慢,需要在加载完成前添加 loading 效果。
本文 loading 使用的是 Element 框架的加载(Loading)组件。
功能实现完整代码
<template>
<div style="height:1000px;" v-loading="loading">
<iframe
ref="Iframe"
src="https://www.taobao.com/"
width="100%"
height="100%"
frameborder="0">
</iframe>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
methods: {
iframeLoad(){
this.loading = true;
const iframe = this.$refs.Iframe;
if (iframe.attachEvent) { // IE
iframe.attachEvent('onload', () => { this.loading = false; });
} else { // 非IE
iframe.onload = () => { this.loading = false; };
}
}
},
mounted() {
this.iframeLoad();
},
};
</script>
关于 < iframe > 标签知识
定义和用法:
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
提示:
- 可以把需要的文本放置在 < iframe > 和 < /iframe > 之间,这样就可以应对无法理解 iframe 的浏览器;
- 使用 CSS 为 < iframe > (包括滚动条)定义样式。
< iframe > 标签属性
属性 | 值 | 描述 |
---|---|---|
frameborder | 1 有边框(默认值);0 关闭边框 | 规定是否显示 iframe 周围的边框 |
height | px;%; | 规定 iframe 的高度 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述 |
marginheight | px | 定义 iframe 的顶部和底部的边距 |
marginwidth | px | 定义 iframe 的左侧和右侧的边距 |
name | frame_name | 规定 iframe 的名称 |
scrolling | yes ; no ; auto; | 规定是否在 iframe 中显示滚动条 |
seamless | seamless | 规定 < iframe > 看上去像是包含文档的一部分 |
src | URL | 规定在 iframe 中显示的文档的 URL |
srcdoc | HTML_code | 规定在 < iframe > 中显示的页面的 HTML 内容 |
width | px; %; | 定义 iframe 的宽度 |
sandbox | " ";allow-forms;allow-same-origin;allow-scripts;allow-top-navigation; | 启用一系列对 < iframe > 中内容的额外限制。 |
align | left;right;top;middle;bottom; | 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。 |
全局属性
< iframe > 标签支持 HTML 中的全局属性。
事件属性
< iframe > 标签支持 HTML 中的事件属性。
浏览器支持
所有主流浏览器都支持 < iframe > 标签。
更多推荐
已为社区贡献40条内容
所有评论(0)