当前位置：首页 > VUE

vue实现iframe

2026-02-09 23:22:09VUE

Vue 中实现 iframe 的方法

在 Vue 项目中嵌入 iframe 可以通过多种方式实现，以下是几种常见的方法：

使用原生 HTML iframe 标签

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

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

动态绑定 iframe 的 src

如果需要动态修改 iframe 的 URL，可以使用 Vue 的 v-bind（或简写为 :）动态绑定 src：

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

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

通过 props 传递 URL

vue实现iframe

如果 iframe 是一个可复用的组件，可以通过 props 接收外部传入的 URL：

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

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

监听 iframe 加载事件

可以通过 @load 事件监听 iframe 是否加载完成：

vue实现iframe

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

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

处理跨域问题

如果 iframe 加载的页面与当前域名不同，可能会遇到跨域问题。可以通过以下方式解决：

在服务器端配置 CORS 允许跨域访问。
使用 postMessage 实现父子页面通信。

动态创建 iframe

在某些场景下可能需要动态创建 iframe，可以通过 JavaScript 实现：

<template>
  <div ref="iframeContainer"></div>
</template>

<script>
export default {
  mounted() {
    const iframe = document.createElement('iframe')
    iframe.src = 'https://example.com'
    iframe.width = '100%'
    iframe.height = '500px'
    iframe.frameBorder = '0'
    this.$refs.iframeContainer.appendChild(iframe)
  }
}
</script>