# Iframe 页签
RouterTab 支持通过 Iframe 页签嵌入外部网站。
注意
该功能需要引入 RouterTab 内置路由，请参考 基础 - 路由配置
# Iframe 页签操作
# 打开 Iframe 页签
// 三个参数分别为：链接、页签标题、图标
this.$tabs.openIframe('https://cn.vuejs.org', 'Vue.js', 'icon-web')
1
2
2
# 关闭 Iframe 页签
this.$tabs.closeIframe('https://cn.vuejs.org')
1
# 刷新 Iframe 页签
this.$tabs.refreshIframe('https://cn.vuejs.org')
1
# Iframe 页签事件
RouterTab 支持以下的 Iframe 页签事件：
iframe-mountediframe 节点挂载就绪iframe-loadediframe 内容加载成功
需要注意的是，iframe 内部链接跳转也会触发 iframe-loaded 事件
示例：
<template>
<router-tab @iframe-mounted="iframeMounted" @iframe-loaded="iframeLoaded" />
</template>
<script>
export default {
methods: {
// iframe 节点挂载就绪
iframeMounted(url, iframe) {
console.log('iframe-mounted:', url, iframe.contentWindow)
},
// iframe 内容加载成功
iframeLoaded(url, iframe) {
console.log('iframe-loaded:', url, iframe.contentWindow)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19