<template>
|
<div>
|
<basic-container>
|
<iframe v-if="$route.query.src"
|
:src='$route.query.src'
|
class="iframe"
|
ref="iframe"></iframe>
|
<iframe v-else
|
:src="urlPath"
|
class="iframe"
|
ref="iframe"></iframe>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import NProgress from 'nprogress' // progress bar
|
import 'nprogress/nprogress.css' // progress bar style
|
export default {
|
name: 'AvueIframe',
|
data () {
|
return {
|
urlPath: this.getUrlPath() //iframe src 路径
|
}
|
},
|
created () {
|
NProgress.configure({ showSpinner: false })
|
},
|
mounted () {
|
this.load()
|
this.resize()
|
},
|
props: ['routerPath'],
|
watch: {
|
$route: function () {
|
this.load()
|
},
|
routerPath: function () {
|
// 监听routerPath变化，改变src路径
|
this.urlPath = this.getUrlPath()
|
}
|
},
|
components: {
|
...mapGetters(['screen']),
|
},
|
methods: {
|
// 显示等待框
|
show () {
|
NProgress.start()
|
},
|
// 隐藏等待狂
|
hide () {
|
NProgress.done()
|
},
|
// 加载浏览器窗口变化自适应
|
resize () {
|
window.onresize = () => {
|
this.iframeInit()
|
}
|
},
|
// 加载组件
|
load () {
|
this.show()
|
var flag = true //URL是否包含问号
|
if (this.$route.query.src.indexOf('?') == -1) {
|
flag = false
|
}
|
var list = []
|
for (var key in this.$route.query) {
|
if (key != 'src' && key != 'name') {
|
list.push(`${key}= this.$route.query[key]`)
|
}
|
}
|
list = list.join('&').toString()
|
if (flag) {
|
this.$route.query.src = `${this.$route.query.src}${
|
list.length > 0 ? `&list` : ''
|
}`
|
} else {
|
this.$route.query.src = `${this.$route.query.src}${
|
list.length > 0 ? `?list` : ''
|
}`
|
}
|
//超时5s自动隐藏等待框，加强用户体验
|
let time = 5
|
const timeFunc = setInterval(() => {
|
time--
|
if (time == 0) {
|
this.hide()
|
clearInterval(timeFunc)
|
}
|
}, 1000)
|
this.iframeInit()
|
},
|
//iframe窗口初始化
|
iframeInit () {
|
const iframe = this.$refs.iframe
|
const clientHeight = document.documentElement.clientHeight - (screen > 1 ? 200 : 130);
|
iframe.style.height = `${clientHeight}px`
|
if (iframe.attachEvent) {
|
iframe.attachEvent('onload', () => {
|
this.hide()
|
})
|
} else {
|
iframe.onload = () => {
|
this.hide()
|
}
|
}
|
},
|
getUrlPath: function () {
|
//获取 iframe src 路径
|
let url = window.location.href
|
url = url.replace('/myiframe', '')
|
return url
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.iframe {
|
width: 100%;
|
height: 100%;
|
border: 0;
|
overflow: hidden;
|
box-sizing: border-box;
|
}
|
</style>
|
