Vue集成Iframe页面的方法示例

Vue集成Iframe页面的方法示例

1. 项目需求

我们切换为vue框架是后面的事情，之前还有一些功能页面是用jsp页面写的，而我们的管理系统需要既支持Vue的url，又要支持这些发布之后的jsp页面

还有一个就是切换tab回来的时候之前输入的东西还要存在

系统页面截图

2. 实现思路

针对这个问题，我们最开始的实现思路是写了一个iframe的通用组件，然后把不同的http的页面的url传递进来进行切换，但是这样不满足第二条，我们发现只要切换了vue的路由，然后再切回http的页面，iframe中的src属性的页面就会从新刷新，没有办法保留住东西，于是就有了下面的实现思路

我们在vue的router-view同级别添加了一个iframeTemp组件，其实就是一个elementUI的tab组件，然后把tab组件的头的样式隐藏在我们菜单栏的下面

/*

* IframeTemplate.vue组件的内部

**/

v-for="(item, index) in iframeTabData"

:key="item.tag"

:label="item.name"

:name="item.tag"

>

v-for="(item, index) in iframeTabData"

:key="item.tag"

:label="item.name"

:name="item.tag"

>

之后的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}}

v-for="(item,index) in funMenu.nextMenu"

@mouseover="clickByMenu($event,item,'nextMenu')"

@click="clickMenuJump(funMenu.nextMenu, item)"

>

{{item.resourceName}}

{{item.resourceName }}

@click="clickByMenu($event,item,'lastMenu')">

{{item.resourceName}}

{{item.resourceName}}

首页

还要添加一个没用的路由，因为我们的锚记还要发生变化

/*

* 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去实现，这点用了广播，确实偷懒了

广播并不是不推荐，而是要使用对场景，这点其实用广播确实不太好，不利于扩展，谁能猜出来会有哪些扩展？

大家不用关心具体的代码，如果你们遇到类似的问题，了解这个思路就可以了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。