今天接到一项目需求，需要在vue页面展示3D标签效果，想着摆脱eslint，就把3D效果写成html页面，在vue页面，通过iframe嵌套去完成。这样，效果是可以展示出来了，但是由于3D效果初始化的时候需要设置宽度和高度，故想着传参的形式，把包裹iframe容器的高度传给html页面，几经尝试，发现在vue中，像iframe页面传递参数，需要用了@load，故记录下来

vue代码

<div class="cloud-content" id="cloudContent"
	<iframe 
	    id="iframe" 
	    ref="frame" 
	    scrolling="no" 
	    style="border: 0" 
	    width="100%" 
	    height="100%" 
	    :src='iframeSrc'
	    @load="sendMessage"
	    >
	</iframe>
</div>
...
...
...
data() {
 return {
    iframeSrc : 'iframe嵌套的html页面地址'  
  }
},
methods: {
   sendMessage(){
      let h = $("#cloudContent").height();  // 获取用于展示iframe页面区域的高度
      let iframeWindow = document.querySelector('#iframe').contentWindow;
      iframeWindow.postMessage(h,"*");  // 发送消息至html页面
  },
}

html代码

 ...
 ...
 <div class="tagBall" id="tagBall">
   ...
   ...
 </div>
 ...
 ...
 window.addEventListener('message', function(event) {
      document.getElementById('tagBall').style.height = event.data + 'px';
 });