vue插入iframe

爱被打了一巴掌 2022-09-12 11:42 109阅读 0赞

方法一：通过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>