vue iframe嵌套html页面,并向html页面传递参数

vue 专栏收录该内容
11 篇文章 0 订阅

今天接到一项目需求,需要在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';
 });
展开阅读全文
  • 0
    点赞
  • 5
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值