跨域 iframe 隐藏页面元素，高度自适应

技术栈

系统 A 和系统 B 均使用 vue2 

 

需求

A 中嵌入 B 系统页面，两种情况

1、去掉页面 header、footer，仅保留页面主体

2、保留 header，去掉 footer、header 中 logo、用户信息

禁用 iframe 中滚动，iframe 窗体高度与 B 中页面一致，使用浏览器滚动条

 

1 隐藏元素

方案制定

域名不同存在跨域，无法在 A 中直接操作 B 中元素，需 B 系统开发者提供支持

iframe 加载之后，给 B 发送消息，B 接收到后将元素隐藏

实现

A 系统，展示 iframe 的 vue 文件

<template lang="pug">
.iframe-box
    iframe(id="iframeInstance" name="iframeInstance" src="http://localhost:8008" scrolling="auto" frameborder="no" seamless ref="iframe" width="100%" height="600")
</template>

<script>
export default {
    async mounted() {
        await this.$nextTick()
        this.$refs.iframe.addEventListener('load', this.onIframeLoad) // 给 iframe 绑定监听事件
    },

    methods: {
        onIframeLoad() {
            console.log('onload')
            this.$refs.iframe.contentWindow.postMessage({ header: false }, '*') // 加载完成之后发送消息，已知目标地址时不要用*，这里的 false 和 true 对应上述需求中两种情况
        }
    },
}
</script>

 

B 系统，App.vue

mounted () {
    window.addEventListener('message', (event) => {
        // 判断消息来源
        const arr = ['xxx.com', 'xxxx.com', 'xxx.cn']
        const flag = arr.some(item => event.origin.includes(item))
        if (!flag) return

        console.log('message', event.data)

        // 如果两个系统不是单点登录同步登录信息，可以接收用户信息后登录
        if (this.$store.getters.unLogin) {
            // login
        }

        // 隐藏 footer
        const footer = document.querySelector('#app .footer')
        footer.style.display = 'none'

        // 根据接收的消息隐藏对应元素
        if (event.data.header) {
            const logo = document.querySelector('#app .header .logo')
            const user = document.querySelector('#app .header .user-info')
            logo.style.display = 'none'
            user.style.display = 'none'
        } else {
            const header = document.querySelector('#app .header')
            header.style.display = 'none'
        }
    }, false);
}

 

2 高度自适应

方案

受跨域限制，B 提供高度，A 接收后调整 iframe height 属性

考虑到展示内容可能收到 tab 切换和过滤条件等影响，通过路由守卫发送消息不满足需求，采用 MutationObserver，监听根元素和子元素

实现

A系统，iframe 展示的 vue 文件

<template lang="pug">
.i-iframe
    iframe(id="iframeInstance" name="iframeInstance" src="http://localhost:8008" scrolling="no" frameborder="no" seamless ref="iframe" width="100%" :height="height")
</template>

<script>
    export default {
        data() {
            return {
                height: 600,
            }
        },

        async mounted() {
            await this.$nextTick()
            this.$refs.iframe.addEventListener('load', this.onIframeLoad)
        },

        created() {
            window.addEventListener('message', event => {
                const height = event.data.height || 800
                if(this.height === height) return
                this.height = height
            }, false)
        },

        methods: {
            onIframeLoad() {
                console.log('onload')
                this.$refs.iframe.contentWindow.postMessage({ header: true }, '*')
            },
        },
    }
</script>

 

B 系统，App.vue

mounted () {
    // 可以写成个方法放 methods 里，这里为了方便展示执行时机就不改了
    const targetNode = document.getElementById('app');
    const config = { attributes: false, childList: true, subtree: true };
    
    // 加防抖，避免多次触发
    const callback = debounce(() => {
        // B 系统设置了 min-height: 100%，过滤条件变化，数据量减少时，由于展示空间足够，高度仍保持上一次的，在这里做一次初始化
        window.parent.postMessage({ height: undefined }, '*');

        // 渲染完成后提供最新的页面高度
        setTimeout(() => {
            window.parent.postMessage({ height: targetNode.offsetHeight }, '*');
        }, 70);
    }, 300)

    const Mutation =
        window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver;
    this.observer = new Mutation(callback);
    this.observer.observe(targetNode, config);
},

beforeDestroy () {
    if(this.observer) {
      this.observer.disconnect()
      this.observer = null
    }
}

 

补充

此需求中 A、B 两系统使用单点登录，自动同步登录信息。如有同步登录态信息需求，可参考隐藏元素实现代码

A 传递消息时，增加用户信息。B 接收后执行登录操作

B 系统登出时，传递消息给 A 系统，A 决定跳转登录页或其他操作