<template>
    <div id="IframeTemplate" v-loading="loading">
        <iframe id="iframe" ref="iframe" :src="src" frameborder="0" :style="iframeStyle" />
    </div>
</template>

<script>
export default {
    name: 'IframeTemplate',
    props: {
        src: {
            type: String,
            default: ''
        },
        iframeStyle: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            loading: false
        };
    },
    created() {
    },
    mounted() {
        this.iframeInit();
    },
    methods: {
        // iframe窗口初始化
        iframeInit() {
            this.$nextTick(() => {
                if (this.$refs && this.$refs.iframe) {
                    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; };
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss">
#IframeTemplate {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
