当前位置：首页 > VUE

vue实现iframe效果

2026-02-20 13:19:52VUE

使用Vue实现iframe效果可以通过多种方式完成，以下是几种常见的方法：

使用`<iframe>`标签直接嵌入

在Vue组件中直接使用HTML的<iframe>标签，通过src属性指定要加载的URL。动态绑定src可以实现灵活的内容切换。

<template>
  <iframe :src="iframeUrl" width="100%" height="500px" frameborder="0"></iframe>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: 'https://example.com'
    }
  }
}
</script>

动态切换iframe内容

通过响应式数据动态修改iframe的src属性，实现内容的动态加载。

<template>
  <div>
    <button @click="changeUrl('https://example1.com')">Page 1</button>
    <button @click="changeUrl('https://example2.com')">Page 2</button>
    <iframe :src="currentUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentUrl: 'https://example1.com'
    }
  },
  methods: {
    changeUrl(url) {
      this.currentUrl = url;
    }
  }
}
</script>

通过组件封装iframe

将iframe封装为可复用的Vue组件，便于统一管理样式和行为。

<template>
  <div class="iframe-container">
    <iframe :src="url" :title="title" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: 'Embedded Content'
    }
  }
}
</script>

<style scoped>
.iframe-container {
  width: 100%;
  height: 500px;
  border: 1px solid #ddd;
}
</style>

监听iframe事件

通过@load事件监听iframe加载完成的状态，执行回调逻辑。

<template>
  <iframe 
    :src="url" 
    @load="onIframeLoad" 
    width="100%" 
    height="500px"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    }
  },
  methods: {
    onIframeLoad() {
      console.log('iframe loaded successfully');
    }
  }
}
</script>

跨域通信

如果iframe内容与父页面同源，可以通过contentWindow直接访问iframe的DOM或数据。跨域场景需使用postMessage通信。

<template>
  <iframe 
    ref="iframeRef" 
    src="https://example.com" 
    width="100%" 
    height="500px"
  ></iframe>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (event.origin !== 'https://example.com') return;
      console.log('Received message:', event.data);
    },
    sendMessage() {
      this.$refs.iframeRef.contentWindow.postMessage(
        { key: 'value' }, 
        'https://example.com'
      );
    }
  }
}
</script>