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()

 

 

包灵！！！