Vue如何集成Iframe页面
这篇文章主要为大家展示了“Vue如何集成Iframe页面”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何集成Iframe页面”这篇文章吧。
创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为万年企业提供专业的网站建设、成都做网站，万年网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
1. 项目需求
我们切换为vue框架是后面的事情，之前还有一些功能页面是用jsp页面写的，而我们的管理系统需要既支持Vue的url，又要支持这些发布之后的jsp页面
还有一个就是切换tab回来的时候之前输入的东西还要存在
系统页面截图
2. 实现思路
针对这个问题，我们最开始的实现思路是写了一个iframe的通用组件，然后把不同的http的页面的url传递进来进行切换，但是这样不满足第二条，我们发现只要切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住东西，于是就有了下面的实现思路
我们在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在我们菜单栏的下面
.position {
position: relative
}
.router-out-content {
position: static;
}
/*
* IframeTemplate.vue组件的内部
**/
#fwIframe {
/*测试位置的时候显示这段--开始*/
/*width: 100%;*/
/*height: 100%;*/
/*background-color: red;*/
/*display: block !important;*/
/*测试位置的时候显示这段--结束*/
position: absolute;
left: 0;
right: 0;
top: 45px;
bottom: 0;
z-index: 5000 !important;
.el-tab-pane {
height: 100%;
width: 100%;
iframe {
/*height: auto;*/
min-height: 600px;
/*height: calc(100% - 45px);*/
width: 100%;
}
}
.full {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
之后的ifram组件的显示隐藏和tab切换，都是通用vuex和bus事件广播实现的
/*
* mainConst.js
**/
/*****************************getter常量****************************************/
export const G_GET_NAVTABDATA = 'G_GET_NAVTABDATA'
/*****************************mutations常量*************************************/
// 一级tab处理
export const M_PUSH_NAVTABDATA = 'M_PUSH_NAVTABDATA'
export const M_DELETE_NAVTABDATA = 'M_DELETE_NAVTABDATA'
export const M_UPDATE_NAVTABDATA = 'M_UPDATE_NAVTABDATA'
// iframe切换处理
export const M_SHOW_IFRAME = 'M_SHOW_IFRAME'
export const M_HIDE_IFRAME = 'M_HIDE_IFRAME'
// iframe添加，删除，选择处理
export const M_IFRAME_PUSH_TAB='M_IFRAME_PUSH_TAB'
export const M_IFRAME_DELETE_TAB='M_IFRAME_DELETE_TAB'
export const M_IFRAME_CHANGE_SELECTCODE='M_IFRAME_CHANGE_SELECTCODE'
// 设置全局系统变量
export const M_SET_SYSTEMNAME = 'M_SET_SYSTEMNAME'
/*****************************actions常量***************************************/
// export const A_REQUEST_DATA = 'A_REQUEST_DATA'
/*
* mainModule.js
**/
import * as mainConst from './mainConst.js'
export default {
state: {
// 一级Tab导航数据集合
navTabData: [],
// 进入的主系统前缀
systemName:'',
// 控制路由同级的Iframe的显示隐藏
showIframe: false,
// iframe页面中的选中页签的code值
iframeSelectTab:'',
// iframe页面的tab数据集合
iframeTabData:[]
},
getters: {
[mainConst.G_GET_NAVTABDATA](state, getters){
return state.navTabData
}
},
mutations: {
// 一级tab处理
[mainConst.M_UPDATE_NAVTABDATA](state, payload){
const index = payload.navIndex
state.navTabData.forEach((item)=> {
item.active = false
})
// 当你利用索引直接设置一个项时是不能触发视图的从新渲染的,下面是老方法和解决办法
// state.navTabData[index].active=true
let newItem = Object.assign({}, state.navTabData[index], {active: true})
// console.log(newItem, 'store newItem')
state.navTabData.splice(index, 1, newItem)
},
[mainConst.M_PUSH_NAVTABDATA] (state, payload) {
state.navTabData.push(payload)
},
[mainConst.M_DELETE_NAVTABDATA] (state, payload) {
state.navTabData.splice(payload.navIndex, 1)
},
// Iframe显示隐藏切换处理
[mainConst.M_SHOW_IFRAME] (state, payload) {
state.showIframe = true
},
[mainConst.M_HIDE_IFRAME] (state, payload) {
state.showIframe = false
},
// Iframe添加，删除，选中处理
[mainConst.M_IFRAME_PUSH_TAB] (state, payload) {
state.iframeTabData.push(payload)
},
[mainConst.M_IFRAME_DELETE_TAB] (state, payload) {
state.iframeTabData = state.iframeTabData.filter(tab => tab.tag !== payload.tag)
},
[mainConst.M_IFRAME_CHANGE_SELECTCODE] (state, payload) {
state.iframeSelectTab=payload
},
// 设置全局system变量
[mainConst.M_SET_SYSTEMNAME] (state, payload) {
state.systemName=payload
}
},
actions: {
// actions的最终功能是修改state，但是它不直接修改state，而是调用mutations
// async [aboutConst.A_REQUEST_DATA]({dispatch,commit}) {
// commit(aboutMutations.REQUEST_LOADING)
// await service.getMovieListData('{"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}')
// console.log(333333)
// await function(){setTimeout(function () {
// commit(aboutMutations.REQUEST_FAILD)
// },6000)}()
// console.log(66666)
// }
// actions的最终功能是修改state，但是它不直接修改state，而是调用mutations
// async [aboutConst.A_REQUEST_DATA]({dispatch,commit}) {
// commit(aboutMutations.REQUEST_LOADING)
// await service.getMovieListData('{"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}')
// console.log(333333)
// await function(){setTimeout(function () {
// commit(aboutMutations.REQUEST_FAILD)
// },6000)}()
// console.log(66666)
// }
}
}/*
* 三级菜单的点击处理
**/
功能导航
{{item.resourceName}}
{{item.resourceName}}
{{item.resourceName }}
{{item.resourceName}}
