如何获取iframe高度并设置自适应

不使用vue对静态页进行组建化封装，第一个就想到了iframe。但是嵌入后，iframe的高度并不是自适应的，需要获取到子页面的高度并在父页面中进行设置。

两个页面，parent.html，child.html

在parent.html中：

<iframe id="ifra" name="ifra" width="100%" scrolling="no" frameborder="no" src="child.html"></iframe>

JS:

  var frame = document.getElementById('ifra')
        window.addEventListener('message', function(e) {
            frame.style.height = e.data.height + 'px'
            frame.style.width = e.data.width + 'px'
        })

child.html:

document.addEventListener('DOMContentLoaded', function() {
        var tbody = document.body
        var width = tbody.clientWidth
        var height = tbody.clientHeight
        window.parent.postMessage({
            height: height,
            width: width
        }, '*')
    }, false)

这样就大致好了。