How to implement integrated Iframe page using Vue

This article mainly introduces examples of how Vue integrates Iframe pages. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

1. Project requirements

We will switch to the vue framework later. Before, some functional pages used jsp pages. Written, and our management system needs to support both the Vue URL and the jsp pages after these releases

The other thing is that when switching tabs back, the previously entered things still exist

System page screenshot

2. Implementation idea

In response to this problem, our initial implementation idea was to write a Common components of iframe, and then pass the URLs of different http pages to switch, but this does not satisfy the second point. We found that as long as we switch the route of vue, and then switch back to the http page, the src attribute in the iframe The page will be refreshed, and there is no way to retain things, so we have the following implementation idea

We added an iframeTemp component at the same level as vue's router-view, which is actually a tab component of elementUI, and then Hide the style of the tab component header under our menu bar

/* * IframeTemplate.vue组件的内部 **/   

The display, hiding and tab switching of the ifram component are all implemented by universal vuex and bus event broadcast

/* * 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) // } } }

/* * 三级菜单的点击处理 **/   

We also need to add a useless route because our anchor has to change

/* * 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文件，只是为了让浏览器中的锚记发生变化 */   

3. Thoughts

Although it is a bit disgusting to combine it with iframe, it can realize our idea

In the implementation of this function, we use the broadcast and monitoring of the bus event bus

1. In fact, we can think about this carefully, because the large-scale use of broadcasts is uncontrollable. We can completely use vuex to achieve this. Using broadcasts is indeed lazy

2. Broadcasting is not not recommended, but it must be used in the right scenario. In fact, using broadcasting is not very good and is not conducive to expansion. Who can guess what expansions there will be?

You don’t need to care about the specific code. If you encounter similar problems, just understand this idea.

The above is what I compiled for everyone. I hope that I will use it in the future. Helpful to everyone.

Related articles:

How to call vuex to store interface data in vue.js

How to implement a number matching game using javascript

The process of encapsulating and submitting data in the form

The above is the detailed content of How to implement integrated Iframe page using Vue. For more information, please follow other related articles on the PHP Chinese website!