方法一:通过document.querySelector嵌入

<template>
    <div id="iframeContainer">
      <iframe class="iframe"  :src="src"  width="100%" frameborder="0" scrolling="auto"  :style="{height:'calc(100vh - 130px)'}"></iframe>
    </div>
</template>

<script>
    export default {
        data(){
            return {
              loading:false,
              src: '',
            }
        },
        created(){
            this.initData();
        },
        methods: {
            initData(){
              this.loading = true;
              var that = this;
              that.$api.get('/super_admin/job', that.pages, response => {
                console.log('========job response',response)
                if (response.status >= 200 && response.status < 300) {
                  var res = response.data;
                  if (res.code == 0) {
                    let userName = res.data.userName;
                    let password = res.data.password;
                    console.log('=======userName',userName)
                    console.log('=======password',password)
                    if(userName&&password){
                      that.$api.post('http://110.100.21.168:8088/admin/login', {userName:userName,password:password}, response => {
                     that.src = response.data;
                    let iframe=document.querySelector(".iframe")
		                 iframe.contentWindow.document.querySelector("html").innerHTML=response.data  console.log('==============JSON.stringify(response)',JSON.stringify(response.data))
                    });
                    }
                  }else{
                    this.$message({
                      message: res.msg,
                      type: 'warning'
                    });
                  }
                } else {
                  this.$message({
                    message: "服务器维护中",
                    type: 'error'
                  });
                }
                this.loading = false;
              });
            }
        },
    }
</script>

<style lang="less">
	@import '../../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 20px;
        text-align: left;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>

方法二:通过src控制

<template>
    <div id="iframeContainer">
      <iframe class="iframe"  :src="src"  width="100%" frameborder="0" scrolling="auto"  :style="{height:'calc(100vh - 130px)'}"></iframe>
    </div>
</template>

<script>
    export default {
        data(){
            return {
              loading:false,
              src: '',
            }
        },
        created(){
            this.initData();
        },
        methods: {
            initData(){
              this.loading = true;
              var that = this;
              that.$api.get('/super_admin/job', that.pages, response => {
                if (response.status >= 200 && response.status < 300) {
                  var res = response.data;
                  if (res.code == 0) {
                    let userName = res.data.userName;
                    let password = res.data.password;
                    that.src = 'http://110.100.21.168:8088/admin/login?userName=' + userName + '&password=' + password;
                  }else{
                    this.$message({
                      message: res.msg,
                      type: 'warning'
                    });
                  }
                } else {
                  this.$message({
                    message: "服务器维护中",
                    type: 'error'
                  });
                }
                this.loading = false;
              });
            }
        },
    }
</script>

<style lang="less">
	@import '../../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 20px;
        text-align: left;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>

Logo

前往低代码交流专区

更多推荐