VUE iframe实现加载(Loading)效果
<template><div style="height:1000px;" v-loading="loading"><iframeref="Iframe"src="https://www.taobao.com/"width="100%"height="100%"frameborder="0"></iframe></div></t.
·
<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 > 标签支持 HTML 中的全局属性。
事件属性
< iframe > 标签支持 HTML 中的事件属性。
更多推荐
已为社区贡献5条内容
所有评论(0)