1.图片样式
2.对应代码图片
其他的对应的监听事件等就不写了,只写关于iframe的
还是没弄懂为什么及时改变src的地址,iframe页面内容也不变,最后只好用原生js来解决了
因为上面的横向导航什么的都是home.vue页面的内容,而iframe是另一个页面的内容,点击那个页面的表格列操作中的【录入】会进入的iframe的及上图2,然后点击三级横向菜单,可进行iframe的内容切换
下拉框切换的展示代码—监听中进行
点击录入按钮–进入iframe
代码
<div id="myIframeDiv" style="width:100%;height:100%">
<!-- <iframe id="iframeId" v-if="iframeSrc && iframeSrcisBool" class="ifa" scrolling=auto :src="iframeSrc" frameborder="0"></iframe> -->
</div>
const config = window.api
mounted () {
...
const _this = this
window.addEventListener('setItemEvent', function (e) {
// this.$nextTick(() => {
if (e.key === 'memberListCopy') {
_this.iframeSrcisBool = false
const token = localStorage.getItem('token')
const sysPlanId = localStorage.getItem('sysPlanId')
const oid = e.newValue.value
_this.iframeSrc = config.pcanswerUrl + '?token=' + token + '&BROID=' + oid + '&SYS_PLAN_FK=' + sysPlanId
const ul = document.getElementById('myIframeDiv')
// setTimeout(function () {
if (ul.children && ul.children.length > 0) {
ul.children.forEach(item => {
ul.removeChild(item)
})
}
// }, 3000)
const myIframeDiv = document.querySelector('#myIframeDiv')
const iframe = document.createElement('iframe')
iframe.onload = () => {
// console.log('这样子就没问题了')
}
iframe.src = _this.iframeSrc // 就是这一行代码,一定要注意哦
iframe.className = 'ifa'
myIframeDiv.appendChild(iframe)
if (_this.iframeSrc) {
localStorage.setItem('memberList', e.newValue.value)
}
_this.iframeSrcisBool = true
const that = _this
window.addEventListener('message', function (e) {
if (e.data === 'cancel') {
that.iframeSrc = ''
}
if (e.data === 'redirect') {
that.$router.push({ path: '/login' })
}
}, false)
} else {
// this.isMemberListInter = false
}
})
...
}
methods:{
...
// 录入问卷
entryQuestions (row) {
this.iframeSrcisBool = false
const token = localStorage.getItem('token')
const sysPlanId = localStorage.getItem('sysPlanId')
const oid = row.broid
// this.iframeSrc = pcURL + href1 + token + href2 + oid + href3 + id
this.iframeSrc = config.pcanswerUrl + '?token=' + token + '&BROID=' + oid + '&SYS_PLAN_FK=' + sysPlanId
// console.log('this.iframeSrc', this.iframeSrc)
if (this.iframeSrc) {
localStorage.setItem('memberList', row.broid)
}
const myIframeDiv = document.querySelector('#myIframeDiv')
const iframe = document.createElement('iframe')
// console.log('iframe', iframe)
iframe.onload = () => {
// console.log('这样子就没问题了')
}
iframe.src = this.iframeSrc // 就是这一行代码,一定要注意哦
iframe.className = 'ifa'
myIframeDiv.appendChild(iframe)
// console.log(this.iframeSrc)
const that = this
window.addEventListener('message', function (e) {
if (e.data === 'cancel') {
that.iframeSrc = ''
}
if (e.data === 'redirect') {
that.$router.push({ path: '/login' })
}
}, false)
this.iframeSrcisBool = true
},
...
}