Iframe嵌入跨域页面高度自适应实现详解

项目中要在页面中嵌入通过富文本编辑器编辑的html内容子页面，预想可通过两种方式实现：

方式一：是将内容子页面的html代码通过vue v-html方式渲染到主页面的div下；

方式二：通过在主页面嵌入iframe页面实现；

两种方式都进行了验证，并且都遇到问题：

方式一问题：可以渲染出子页面html内容，但是丢失css样式，引入ckeditor的标准样式css后，绝大部分样式问题解决，但通过标签选择器指定的样式会受主页面样式的干扰，导致子页面内容在浏览器上无法还原实际显示效果；

方式二问题：iframe方式可以很轻易的加载出子页面内容，但由于子页面与主页面之间跨域，所以主页面无法获取到iframe子页面的document，从而无法获取子页面的实际高度，显示效果无法达到预期。

经过比较果断选取方式二来解决，那么如何解决跨域获取iframe子页面高度，并实现iframe自适应子页面高度的问题呢？

最终采用iframe子页面通过postMessage方式解决问题，具体如下：

1）子页面onload完成后通过postMessage方式将实际页面高度通知给父页面；

      var ele_height = element.offsetHeight;
      console.log("Size: " + ele_height);
      if(this.frameMode) {
        let _resizeMsgObj = {
          type: "resize",
          data: {
            height: ele_height
          }
        };
        top.postMessage(JSON.stringify(_resizeMsgObj), '*');

2）父页面监听消息，并在接收到消息后调整iframe高度；

html代码：

<div class="com_right_content" style="height: auto;">
    <iframe style="width: 100%;height:800px;"
                  :src="detailPreviewMediaInfo.webviewurl"
                  frameborder="0"
                  scrolling="no"
                  id="contentIframe">
    </iframe>
</div>

js代码：

window.addEventListener('message', function(event){
          console.log(`received message: `, event.origin, event.data)
          let msgdataStr = String(event.data)
          if(msgdataStr.indexOf("resize") != -1){
            console.log(`received iframe resize message: `, event, event.data)
            let msgdata = JSON.parse(msgdataStr)
            document.getElementById('contentIframe').style.height = msgdata.data.height + 'px'
          }

        }, false);

补充说明：

由于父页面不知道子页面的高度，先将iframe高度设置为0px，接收到子页面消息后再将iframe高度设置为实际高度，发现iframe加载需要较长时间，原因是子页面onload事件是在整个页面全部加载完成后才触发，包括页面所有js、css、图片文件的加载，但图片加载需要较长时间，所以iframe加载时间过长，影响用户体验，但在图片加载完之前子页面的高度又可能不准确，因此在父页面在初始时给iframe设置一个高于一屏的高度，可以较好的解决用户体验问题。