iframe嵌套跨域子頁面變化高度自適應

iframe嵌套子頁面

   <iframe width="100%" height="100%" id='test'  title='測試' src='https://www.baidu.com' frameBorder="0" />

現在的高度是整個屏幕的高度，如果子頁面高度大於屏幕高度，內容無法顯示，並且沒有滾動條，要有滾動條必須給iframe賦值一個確定的高度。但是又由於他是跨域子頁面，所以沒辦法獲得子頁面的高度，所以可以使用postMessage方法，子頁面獲取高度傳值給父頁面，然后變化iframe的高度

通過監聽子頁面的postMessage信息，獲取信息來改變父頁面iframe高度

 window.addEventListener('message', (event) => {
            if (event.origin === nestOrigin) {
                document.getElementById('test').style.height = `${event.data}px`
            }
        })

接下來是子頁面的操作:

給子頁面的最外層設置一個div包層，設置id

<div id="child">
子頁面內容
</div>

然后通過MutationObserver監聽子頁面改變，當監聽到改變的時候，觸發postMessage

const targetNode = document.getElementById('child')
        const configObserver = { 
            attributes: true, 
            // attributeFilter: ['style'],
            // attributeOldValue: true,
            childList: true,
            subtree: true }
        // 創建一個觀察器實例並傳入回調函數
        observer = new MutationObserver(() => {
            const target = document.getElementById('child').scrollHeight
            window.parent.postMessage(target, postMessageOrigin) 
}) 

// 以上述配置開始觀察目標節點 
observer.observe(targetNode, configObserver)

這樣的話，只要子頁面有任何的改變都會觸發postMessage傳回變化的高度

最后在頁面卸載的時候取消監聽

 observer.disconnect()

 

 

包靈！！！