在Vue中优雅的更改iframe嵌入页面的样式

【前言】

通过外部引入css文件来控制嵌入页面的样式

【正文】

公共iframe组件封装-只适合于同域名的页面嵌入

传入属性：

1. 嵌入页面路径
2. css文件名称（默认放在/static/css/下），默认css文件名可以自己定义，在确定嵌入页面不多，相互之间的css属性不会冲突的情况下，可以使用一个css文件

<template>
    <div class="wrapper-c">
        <div style="height: 100%" v-bkloading="{ isLoading: loading, opacity: 1, zIndex: 10 }">
            <iframe id="fram_box"
                @load="loadFrame"
                :src="url"
            >
            </iframe>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'common-iframe',
        props: {
            url: String,
            link: {
                type: String,
                default: 'frame_reset'
            }
        },
        data() {
            return {
                loading: true
            }
        },
        mounted() {
            const close = this.closeLoading
            $('#fram_box').load(() => {
                close()
            })
        },
        methods: {
            closeLoading() {
                this.loading = false
            },
            // loadFrame函数是iframe加载完成后回调函数
            loadFrame() {
                // 获取iframe节点
                const iframeBox = document.getElementById('fram_box')
                // 获取iframe html文件
                const doc = iframeBox.contentWindow.document
                // 获取iframe html文件head
                const head = doc.getElementsByTagName('head')
                // 新建link标签
                const linkTag = document.createElement('link')
                // 设置link标签id
                linkTag.id = 'newstyle'
                // link标签引入css文件的地址 ；window.STATIC_URL 是全局变量，指向静态资源目录，需要自己指定
                linkTag.href = `${window.STATIC_URL}css/${this.link}.css`
                // 设置link标签属性
                linkTag.setAttribute('rel', 'stylesheet')
                // 设置link标签属性
                linkTag.setAttribute('type', 'text/css')
                // 将link标签添加进iframe html文件的head里
                head[0].append(linkTag)
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrapper-c {
    width: calc(100%);
    height: 100%;
    margin-left: 0;

    #fram_box {
        height: 100%;
        width: 100%;
        border-width: 0px;
    }
}
</style>

父组件使用

<template>
    <div id="wraper-p">
        <common-iframe :url="infoUrl" :link="'health_adviser'"></common-iframe>
    </div>
</template>

<script>
    import commonIframe from '../components/commonIframe'

    export default {
        name: 'overview',
        components: {
            commonIframe 
        },
        data() {
            return {
                infoUrl: '【页面路径】'
            }
        }
    }
</script>

<style lang="scss" scoped>
#wraper-p{
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    overflow: hidden;
}
</style>