需求:
由于 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 > 标签属性
全局属性
< iframe > 标签支持 HTML 中的全局属性。
事件属性
< iframe > 标签支持 HTML 中的事件属性。
浏览器支持
所有主流浏览器都支持 < iframe > 标签。