跨域 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, 11             }
        },

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

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

        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 }, '*'); 10 
        // 渲染完成后提供最新的頁面高度
        setTimeout(() => { 13             window.parent.postMessage({ height: targetNode.offsetHeight }, '*'); 14         }, 70); 15     }, 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 決定跳轉登錄頁或其他操作