Vue集成Iframe页面的方法示例

  <!--路由渲染的功能模块区域--><div class="router-out-content"> <!--缓存部分页面的写法--> <!--兼容系统外部页面--></div> .position { position: relative } .router-out-content { position: static; } 

 /* * IframeTemplate.vue组件的内部 **/  <!--iframe页面展示区域--><div id="fwIframe"> <!---->  </div> #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; } } 

 /* * 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(){s<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i>etTimeout(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) // } } } 

 /* * 三级菜单的点击处理 **/  <!--三级菜单导航功能--> .main-nav { position: relative; height: 42px; line-height: 42px; background: #eee; border-bottom: 1px solid #ddd; } .main-nav a { color: #303e51; text-decoration: none; } .main-nav a:hover { color: #438eb9; } .main-nav .main { /*padding: 0 16px;*/ text-align: center; border-right: 1px solid #ddd; position: relative; background: #eee; width: 122px; } .main-nav .main.active, .main-nav .main:hover { background: white; } .main-nav .more-menu { position: fixed; top: 84px; left: 0; max-height: 500px; bottom: 124px; z-index: 998; background: #fff; border: 1px solid #ddd; border-left: none; border-top: 0; overflow: hidden; box-shadow: 1px 1px 10px #ddd; } .main-nav .more-menu ul, .main-nav .more-menu .dl { text-align: left; overflow: auto; } .main-nav .more-menu a { font-size: 14px; color: #303e51; text-decoration: none; } .main-nav .more-menu a:hover, .main-nav .more-menu a.active { color: rgb(46, 167, 224); } .main-nav .more-menu .first-menu { height: 100%; border-right: 1px solid #ddd; box-shadow: -1px 0px 5px #ddd inset; /*width: 138px;*/ } .main-nav .more-menu .first-menu li { height: 36px; line-height: 36px; margin: 0 15px 0 6px; min-width: 94px; } .main-nav .more-menu .first-menu a { display: block; background: url(../../asserts/images/home/main/icon_1.png-600) no-repeat 5px center; width: 100%; height: 100%; border-bottom: 1px solid #dddddd; padding-left: 20px; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-indent: 5px; } .main-nav .more-menu .first-menu a.active, .main-nav .more-menu .first-menu a:hover { background: url(../../asserts/images/home/main/icon_2.png-600) no-repeat 5px center rgb(46, 167, 224); color: white; border: 0; } .main-nav .more-menu .next-menu { height: 100%; border-right: 1px solid #ddd; box-shadow: -1px 0px 5px #ddd inset; /*width: 138px;*/ line-height: 14px; } .main-nav .more-menu .next-menu li:first-child { margin-top: 10px; } .main-nav .more-menu .next-menu li { margin-bottom: 16px; margin-left: 16px; } .main-nav .more-menu .next-menu li a { border-left: 2px solid transparent; padding-left: 10px; margin-right: 24px; } .main-nav .more-menu .next-menu li a:hover, .main-nav .more-menu .next-menu li a.active { border-left: 2px solid rgb(46, 167, 224); } .main-nav .more-menu .last-menu { height: 100%; min-width: 288px; line-height: 14px; } .main-nav .more-menu .last-menu .dt { margin-left: 16px; margin-top: 10px; span { color: #566678; } } .main-nav .more-menu .last-menu .dd { color: #7a8897; margin-top: 16px; margin-left: 4px; > li { margin-bottom: 16px; a { border-left: 2px solid transparent; padding-left: 6px; margin-right: 16px; &:hover, &.active { border-color: #2ea7e0; } } } } /*.main-nav .more-menu .last-menu dd a:hover,.main-nav .more-menu .last-menu dd a.active{*/ /*border-left: 2px solid rgb(46,167,224);*/ /*}*/ .main-nav .main .fun { width: 100%; height: 100%; display: block; } .main-nav .main .fun:before { content: ""; width: 18px; height: 18px; background: url("../../asserts/images/home/main/icon-all.png-600"); background-position: -89px -7px; display: inline-block; margin-right: 10px; margin-top: 2px; vertical-align: text-top; } .main-nav .l-nav { z-index: 2; } .main-nav .nav-index { width: 90px; text-align: center; position: relative; background: #eee; } .main-nav .nav-index:after { content: ""; width: 8px; height: 40px; background: url(../../asserts/images/home/main/shadow-l.png-600); position: absolute; top: 2px; left: 90px; } .main-nav .lt-tab { position: absolute; left: 0; z-index: 2; border-bottom: 1px solid #ddd; } /*tab--------*/ .main-nav .ct-tab { position: absolute; z-index: 1; left: 213px; width: 10000000px; } .main-nav .ct-tab .ct-ul { } .main-nav .ct-tab .ct-ul li { position: relative; float: left; } .main-nav .ct-tab .ct-ul li a { height: 24px; line-height: 24px; margin: 9px 0; min-width: 90px; /*max-width: 190px;*/ border-right: 1px solid #ddd; display: block; text-align: center; position: relative; } .main-nav .ct-tab .ct-ul li a i { display: none; } .main-nav .ct-tab .ct-ul li a i { display: none; } .main-nav .ct-tab .ct-ul li a .content { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-nav .ct-tab .ct-ul li a:hover { z-index: 1; } .main-nav .ct-tab .ct-ul li:first-child a:hover, .main-nav .ct-tab li:first-child a.active { margin-left: 0; margin-right: 0; } .main-nav .ct-tab .ct-ul li a:hover, .main-nav .ct-tab li a.active { max-width: 250px; display: block; text-align: center; position: relative; border: 0; margin: 0 -20px; margin-top: 4px; color: black; padding: 0; } .main-nav .ct-tab .padding { width: auto; padding: 0 16px; } .main-nav .ct-tab .ct-ul li a:hover > i, .main-nav .ct-tab .ct-ul li a.active > i { display: inline-block; width: 34px; height: 37px; float: left; } .main-nav .ct-tab .ct-ul li a:hover .line-l { background: url(../../asserts/images/home/main/line_left.png-600) no-repeat; } .main-nav .ct-tab .ct-ul li a:hover .line-r { background: url(../../asserts/images/home/main/line_right.png-600) no-repeat; } .main-nav .ct-tab .ct-ul li a.active .line-l { background: url(../../asserts/images/home/main/line_sel_left.png-600) no-repeat; } .main-nav .ct-tab .ct-ul li a.active .line-r { background: url(../../asserts/images/home/main/line_sel_right.png-600) no-repeat; } .main-nav .ct-tab .ct-ul li a:hover .content, .main-nav .ct-tab li a.active .content { border-top: 1px solid #ddd; float: left; line-height: 36px; min-width: 60px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgb(245, 245, 245); } .main-nav .ct-tab .ct-ul li a:hover .cha, .main-nav .ct-tab .ct-ul li a.active .cha { background: rgb(245, 245, 245); width: 20px; height: 36px; line-height: 36px; border-top: 1px solid #ddd; padding-left: 7px; color: #303e51; } .main-nav .ct-tab .ct-ul li a.active .content, .main-nav .ct-tab .ct-ul li a.active .cha { background: white; } .main-nav .ct-tab .ct-ul li a .cha { color: #eee; } .main-nav .ct-tab .ct-ul li a .cha:hover { color: black; } .main-nav .ct-tab .ct-ul li a.active { z-index: 2; } 

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