# Iframe Tab

You can open external websites with iframe tabs.

WARNING

This feature requires RouterTabRoutes from RouterTab. See Essentials - Route Config

# Iframe Tab Operation

# Open iframe Tab

// the arguments are url, tab title and icon
this.$tabs.openIframe('https://vuejs.org', 'Vue.js', 'icon-web')

1
2

# Close iframe Tab

this.$tabs.closeIframe('https://vuejs.org')

# Refresh iframe Tab

this.$tabs.refreshIframe('https://vuejs.org')

# Iframe Tab Events

Supported iframe tab events are listed below:

iframe-mounted
iframe-loaded

Note that url jumping within iframe will also trigger iframe-loaded event.

API Demo

Example:

<template>
  <router-tab @iframe-mounted="iframeMounted" @iframe-loaded="iframeLoaded" />
</template>

<script>
export default {
  methods: {
    // iframe mounted
    iframeMounted(url, iframe) {
      // eslint-disable no-console
      console.log('iframe-mounted:', url, iframe.contentWindow)
    },

    // iframe content loaded successfully
    iframeLoaded(url, iframe) {
      // eslint-disable no-console
      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
20
21

← Tab Rules Transition →