使用iframe时动态获取内容高度

iframe页面里的内容是由vue写的。
iframe要加在用js写的地方。

原理：iframe嵌套，会有跨域问题。
我们可以使用postMessage(),自行将内容高度不停的向外传。
父页面，获取到高度设置给iframe。ok

data () {
    return {
      infoMenu: infoMenu,
      indInfo:'',
      timer:'',
    }
  },
  mounted () {
    var _this = this
    _this.timer = setInterval(function(){
      top.postMessage(_this.$refs.dataCon.clientHeight,'*');
    },300)
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },

父页面接收

<iframe src="http://www.lincoc.com/#/data/shanghaiImportBOL" id="iframe" height="auto" width="1170px" scrolling="no" style="min-height:560px;overflow:hidden;display:block;margin:0 auto;"></iframe>

<script>
	window.addEventListener("message", function (event) {
        // 子窗口发送过来的数据
        document.getElementById("iframe").height = event.data;
    }, false);
</script>