【JS】iframe 实现加载 loading 效果（包含Vue和React案例）

Vue 案例

• Element 框架的加载（Loading）组件案例

<template>
  <div style="height:1000px;" v-loading="loading">
    <iframe 
      ref="Iframe" 
      src="https://www.baidu.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>

• Ant Design of Vue 框架的加载（Loading）组件案例

<template>
  <a-spin :spinning="loading"  tip="Loading..." style="height:100vh">
    <iframe 
      ref="Iframe" 
      src="https://www.baidu.com/" 
      width="100%" 
      height="100%" 
      frameborder="0">
    </iframe>
  </a-spin>
</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>

React 案例

• Ant Design 框架的加载（Loading）组件案例

import React, {  useEffect, useRef, useState } from 'react';
export const IframePage: React.FC<any> = () => {
	const [loading, setLoading] = useState(false)
	const Iframe= useRef<any>(null);
	const iframeLoad = ()=>{
      setLoading(true)
      if (Iframe.attachEvent) { // IE
        Iframe.attachEvent('onload', () => { setLoading(false) });
      } else { // 非IE
        Iframe.onload =  () => { setLoading(false) };
      }
    }
	useEffect(()=>{
		iframeLoad()
	},[])
	
	return(
		<Spin spinning={loading}>
        	<iframe 
      			ref={Iframe}
      			src="https://www.baidu.com/" 
      			width="100%" 
      			height="100%" 
      			frameborder="0"
      		>
      		</iframe>
      	</Spin>
	)
}