5 iframe嵌套页面_vue 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" 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("暂无数据")  }}