先来看个效果图

例：http://localhost:9527/#/iframe/urlPath?src=https://www.baidu.com (访问百度)

格式：http://localhost:9527/#/iframe/urlPath?src=第三方的网站

并且支持判断iframe是否加载完成的等待框以及浏览器窗口变化做出的响应

改造代码

./src/views/iframe/index.vue(第三方iframe组件)

export default {

name: 'myiframe',

data() {

return {

fullscreenLoading: false,

urlPath: this.getUrlPath()

}

},

created() {

this.fullscreenLoading = true

},

mounted() {

this.iframeInit()

window.onresize = () => {

this.iframeInit()

}

},

props: ['routerPath'],

watch: {

routerPath: function(val) {

this.urlPath = this.getUrlPath()

}

},

components: {},

methods: {

iframeInit() {

const iframe = this.$refs.iframe

const clientHeight = document.documentElement.clientHeight - 90

iframe.style.height = `${clientHeight}px`

if (iframe.attachEvent) {

iframe.attachEvent('onload', () => {

this.fullscreenLoading = false

})

} else {

iframe.onload = () => {

this.fullscreenLoading = false

}

}

},

getUrlPath: function() {

let url = window.location.href

url = url.replace('/iframe', '')

return url

}

}

}

.iframe {

width: 100%;

height: 100%;

border: 0;

overflow: hidden;

box-sizing: border-box;

}

./src/router/reouter/index.js(增加路由)

{

path: '/iframe',

component: Layout,

redirect: '/iframe', // you can set roles in root nav

children: [{

path: ':routerPath',

component: _import('iframe/index'),

name: 'iframe',

meta: {

title: 'iframe',

icon: 'people'

}

}]

},

./src/store/modules/tagsView.js(让vue-router路由可以获取完整的url路径)

将全部的view.path改成view.fullPath

if (state.visitedViews.some(v => v.path === view.fullPath)) return

state.visitedViews.push({

name: view.name,

path: view.fullPath,

title: view.meta.title || 'no-name'

})

if (!view.meta.noCache) {

state.cachedViews.push(view.name)

}