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组件的头的样式隐藏在我们菜单栏的下面

.position {

position: relative

}

.router-out-content {

position: static;

}

import { mapState } from 'vuex'

import iframeTemp from '@/containers/main/IframeTemplate.vue'

export default {

data() {

return {}

},

components: {

iframeTemp

},

computed: {

...mapState([

'showIframe'

])

}

}

/*

* IframeTemplate.vue组件的内部

**/

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

:key="item.tag"

:label="item.name"

:name="item.tag"

>

#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;

}

}

// selectTabCode=>iframeSelectTab

// tabsList=>iframeTabData

import {mapState} from 'vuex'

import * as mainConst from '@/store/mainConst.js'

export default{

data(){

return {

// tabsList: [],

// selectTabCode: ''

}

},

computed: {

...mapState([

'iframeTabData',

'iframeSelectTab',

'navTabData',

'systemName'

])

},

mounted(){

const _this = this

// 1、监听添加iframe中tab的广播

this.$root.bus.$on('addIframeTab', function (item) {

// _this.tabsList.push(item)

// _this.selectTabCode = item.tag

_this.$store.commit(mainConst.M_IFRAME_PUSH_TAB, item)

_this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, item.tag)

})

// 2、监听切换iframe中tab的广播

this.$root.bus.$on('changeIframeTab', function (tag) {

_this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, tag)

})

// 3、监听删除iframe中tab的广播

this.$root.bus.$on('deleteIframeTab', function (obj) {

// 1、删除iframe中的指定tab页面

_this.$store.commit(mainConst.M_IFRAME_DELETE_TAB, obj)

// _this.tabsList = _this.tabsList.filter(tab => tab.tag !== obj.tag)

// 2、如果删除的一级tab不是当前激活的一级tab，TabsTemeplate中的一级tab删除事件已经在vuex中删除了，不需要做路由跳转操作了

let index = obj.index

for (let i = 0; i < _this.navTabData.length; i++) {

if (_this.navTabData[i].active) {

return

}

}

// 3、如果删除的一级tab是当前激活的一级tab，

const con = _this.navTabData[index - 1] || _this.navTabData[index]

let url = `/${_this.systemName}`

if (con) {

// 还有其他的一级tab，就赋值其他的一级tab的url，探后跳转

url = con.url

con.active = true

// 如果还有其他一级的tab,那么还要判断跳转的页面是不是iframe

if (url.toLowerCase().indexOf("/iframe") == 0) {

// 如果是iframe页面，显示iframe,广播iframe的切换tab切换事件，路由进行跳转

_this.$store.commit(mainConst.M_SHOW_IFRAME)

_this.$root.bus.$emit("changeIframeTab", url.slice(8))

} else {

// 如果不是iframe页面，隐藏iframe,路由进行跳转

_this.$store.commit(mainConst.M_HIDE_IFRAME)

// _this.$store.commit(mainConst.M_UPDATE_NAVTABDATA, {navIndex: index})

}

}

else {

// 没有其他的一级tab，直接隐藏iframe，跳首页

_this.$store.commit(mainConst.M_HIDE_IFRAME)

}

_this.$router.push(url)

})

}

}

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