如何在vue+element项目中利用iframe嵌入第三方网页并实现根据浏览器自适应大小

                前段时间利用python+vue+element做了个安全测试平台项目,准备嵌入mobsf这个APP扫描工具,是利用iframe实现的

具体代码如下:

①scrolling=“no”表示不显示滚动条

②style="position:absolute;top:80px;left: 120px;" 表示嵌入的iframe位置距离浏览器顶部80px,距离浏览器左侧120px,刚好是我的侧边栏和顶部导航栏的宽度

③mounted()中的方法在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。包括调整页面的高和宽

④changeMobsfIframe为自适应宽高的方法,分别在第一次页面加载和调整浏览器大小(onresize ())时被调用、

 

<template>
  <div>
    <iframe src="http://0.0.0.0:8080" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:80px;left: 120px;"></iframe>
  </div>
</template>


<script>
  export default {
    data () {
      return {
      }
    },
    mounted(){
      /**
      * iframe-宽高自适应显示   
      */
      function changeMobsfIframe(){
        const mobsf = document.getElementById('mobsf');
        const deviceWidth = document.body.clientWidth;
        const deviceHeight = document.body.clientHeight;
        mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
        mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
      }

      changeMobsfIframe()

      window.onresize = function(){
        changeMobsfIframe()
      }
    },     
  }
</script>

效果如下所示

  • 9
    点赞
  • 3
    评论
  • 29
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

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

抵扣说明:

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

余额充值