当前位置：首页 > VUE

vue实现iframe

2026-01-12 10:19:07VUE

在Vue中使用iframe

Vue中可以通过直接使用HTML的<iframe>标签或动态绑定属性来实现嵌入外部页面的功能。以下是具体实现方法：

基础用法

在Vue模板中直接使用<iframe>标签，通过src属性指定要加载的URL：

<template>
  <iframe src="https://example.com" frameborder="0"></iframe>
</template>

动态绑定src

通过Vue的数据绑定动态控制iframe内容：

<template>
  <iframe :src="iframeUrl" frameborder="0"></iframe>
</template>

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

安全限制处理

跨域iframe需要处理安全限制，可通过sandbox属性控制权限：

<iframe 
  :src="iframeUrl"
  sandbox="allow-same-origin allow-scripts"
></iframe>

通信方法

父子页面通信需使用postMessage：

// 父页面发送消息
window.frames[0].postMessage('data', '*');

// 子页面接收
window.addEventListener('message', (event) => {
  console.log(event.data);
});

响应式尺寸控制

通过CSS实现响应式iframe：

<iframe 
  :src="iframeUrl"
  class="responsive-iframe"
></iframe>

<style>
.responsive-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

加载状态处理

添加加载状态提示：

vue实现iframe

<template>
  <div>
    <iframe 
      :src="iframeUrl"
      @load="onLoad"
      v-show="!isLoading"
    ></iframe>
    <div v-if="isLoading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  methods: {
    onLoad() {
      this.isLoading = false;
    }
  }
}
</script>