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

最新推荐文章于 2024-09-29 15:59:53 发布

MoSalah

最新推荐文章于 2024-09-29 15:59:53 发布

阅读量3.1w

点赞数 13

本文链接：https://blog.csdn.net/m0_37746315/article/details/83030423

版权

前段时间利用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>

效果如下所示