js框架：vue

ui框架：element

因为iframe加载慢，所以在它加载完成前添加loading效果，loading用的是element家的加载效果 

<template>
  <div style="height:100%;overflow: auto;" v-loading="loading">
    <iframe ref="stfIframe" :src="src" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</template>

<script>
import cookie from '@/libs/cookie';
export default {
  data() {
    return {
      src: 'https://www.baidu.com',
      loading: true,
    };
  },
  created() {
    
  },
  mounted() {
    const iframe = this.$refs.stfIframe;
    // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
    const that = this;
    if (iframe.attachEvent) {
      // IE
      iframe.attachEvent('onload', () => {
        that.stateChange();
      });
    } else {
      // 非IE
      iframe.onload = function () {
        that.stateChange();
      };
    }
  },
  methods: {
    stateChange() {
      this.loading = false;
  },
};
</script>
<style scoped></style>

 

版权声明：本文为mengqiu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/mengqiu/p/13890926.html