vue element ui iframe嵌套网页自适应

下午经理让我在客户服务平台创建一个新的路由,把我们之前写的报表工具嵌套进去,之前的是通过ip访问的,讨论了一会决定用神器 iframe,直接嵌套进去,之前也写过,代码这个东西,CV才是精髓,去某度看了一下,随后开始操作

首先创建好了路由的权限,让他在页面也可以进行点点点的操作,之后创建vue页面

去页面看看

成功出现,下面看一下我之前开发的页面的样子,记住这个ip,这个页面非常完美啊,有条件查询,有分页,有…

然后直接使用iframe嵌套进去

嵌套进去之后,属实有点怪

先不管UI了,最后再调,我觉得是我引入页面的问题,我待会去设置一下应该就是可以了,分享一下代码

<template>
  <div>
    <iframe src="外部网页url" id="mobsf" frameborder="0" style="position:absolute;"></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)-220) + 'px'; //数字是页面布局宽度差值
        mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
      }

      changeMobsfIframe()

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

现在要解决的是url的问题了,在公司肯定不会让你每次引入页面都把url写死的,所以我们来解决他

找到你们项目中负责控制url的文件,我的是这个,所以我就在这里直接规定

搞了一晚上,一直NaN原来这个.env文件是有点东西的给你们普及一下

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

.env：

其中最重要的是,.env文件数据配置文件,修改完之后一定要重启,切记

上一下代码
说一下引入的思路,先引入hrCloudCommon里面的js
然后初始化设置的时候定义一个方法,在methods里面给路径赋值
通过data的return到上面的template里面
随后iframe的src记得加上:
:的意思就是给这个对象赋Vue属性

<template>

  <div>
<!--    <iframe :src="ReportUrl1" id="mobsf" frameborder="0" style="position:absolute;"></iframe>-->
    <iframe :src="ReportUrl1" style="width: 100%;height: 100%;min-height: 600px"></iframe>
  </div>

</template>

<script>
  import Report from '@/api/common/hrcloudCommon';
    export default {
        name: "Report",
      data () {
        return {
          ReportUrl1:''
        }
      },
      mounted(){
          this.showReport();
        /**
         * iframe-宽高自适应显示
         */
        function changeMobsfIframe(){
          const mobsf = document.getElementById('mobsf');
          const deviceWidth = document.body.clientWidth;
          const deviceHeight = document.body.clientHeight;
          mobsf.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
          mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
        }

        changeMobsfIframe()
        window.onresize = function(){
          changeMobsfIframe()
        }

      },
      methods:{
          showReport(){

            let ReportUrl = Report.Report_Cli_URL+"reportTools/cusMain";
            // let ReportUrl = Report.Report_Cli_URL
            console.log("ReportUrl",ReportUrl)
            // let ReportUrl = 'http://192.168.251.62:9093'
            let HRUrl = Report.HRCLOUD_URL
             this.ReportUrl1 = ReportUrl
            //console.log("ReportUrl",ReportUrl)
            //alert("1")
          }
      }

    }
</script>

<style scoped>

</style>

最后就嵌套成功了

事情并没有结束,经理说不要这个页面,要根据右上角的ciic188的id进行查询,判断,这可难住我了,先写根据id拼接页面吧,其他的先不管

showReport(){

  let ReportId = '4417';
  let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
  console.log("ReportUrl",ReportUrl)
   this.ReportUrl1 = ReportUrl

}

可以看到直接规定一个 ReportID 然后根据经理给出的路径一拼接就可以了

但没说这个ReportId是啥,经理让我自己找,这就有点麻烦了,下次给大家分享一个好东西

先分享一下成功的图片

但是这个ReportId是死的所以需要确定id,也就是Id,这里我找到之后用sessionStorage把id存进去了,然后在这个id取出就可以了大致代码是这样

showReport(){
  let ReportId =  sessionStorage.getItem("cusId")
  console.log("ReportId",ReportId)
  let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
  console.log("ReportUrl",ReportUrl)
   this.ReportUrl1 = ReportUrl
  if (ReportId != ""){
    this.$message.success("查询成功")
  }else {
    this.$message.warning("暂无数据")
  }
}

以上就是Vue使用iframe前台外部页面的详细内容，更多请关注我分享的其它相关文章！