vue插入iframe
方法一:通过document.querySelector嵌入<template><div id="iframeContainer"><iframe class="iframe":src="src"width="100%" frameborder="0" scrolling="auto":style="{height:'calc(100vh - 130px)'}">
·
方法一:通过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>
更多推荐
已为社区贡献4条内容
所有评论(0)