大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“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组件的头的样式隐藏在我们菜单栏的下面
/* * IframeTemplate.vue组件的内部 **/
之后的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) // } } }
/* * 三级菜单的点击处理 **/
还要添加一个没用的路由,因为我们的锚记还要发生变化
/* * iframe/router/index.js */ const systemNamePrefix = "iframe_" import MainContainer from '@/containers/MainContainer.vue' import IframeComponent from '@Iframe/containers/IframeComponent.vue' export default [ { path: '/iframe', component: MainContainer, children: [ {path: ':tag', component: IframeComponent, meta: {requiresAuth: true, keepAlive: true}}, ], meta: {requiresAuth: true} } ]
/* * iframeComponent.vue,一个没用的vue文件,只是为了让浏览器中的锚记发生变化 */{{src}}
3. 思考点
虽然这样和iframe结合有点恶心,但是可以实现我们的思路
在这个功能的实现中我们用到了bus事件总线的广播和监听
其实这点我们是可以仔细思考的,因为大量的使用广播不可控,我们可以完全用vuex去实现,这点用了广播,确实偷懒了
广播并不是不推荐,而是要使用对场景,这点其实用广播确实不太好,不利于扩展,谁能猜出来会有哪些扩展?
以上是“Vue如何集成Iframe页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!