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>