Vue 中 iframe 的高度自适应

前端 同时被 2 个专栏收录
6 篇文章 0 订阅
7 篇文章 0 订阅

iframe引入报表,高度的自适应。

<template>
  <div style="height:auto;">
    <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe">
    </iframe>
  </div>
</template>

<script type="text/javascript">


export default {
  name: 'turnoverfamily',
  data(){
    return{
      bdTokenUrl : 'http://193.112.22.34:8081/WebReport/ReportServer?reportlet=PHBIP_JTXX.cpt&op=view'
    }
  },
  created() {
    this.getUrl();
    this.$nextTick(()=>{
        this.getCode();
    });
  },
  mounted(){
    /**
     * iframe-宽高自适应显示   
     */
    const oIframe = document.getElementById('bdIframe');
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
    oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
  },
  methods: {
    /**
     * 获取-外部接口信息
     */
    getUrl() {
        let that = this
        let bdUrl = {queryurl: this.$paths.bdpath+'/locate'};
        this.$api.getBdToken(bdUrl,function(res) {
            that.bdTokenUrl = res.data.data;
    })
  },
}
}
</script>

<style>

</style>

 

  • 2
    点赞
  • 5
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值