当前位置：首页 > VUE

vue路由实现iframe

2026-01-08 05:54:28VUE

在Vue中实现iframe嵌入可以通过路由配置和组件动态加载来完成。以下是具体实现方法：

路由配置

在Vue Router的路由配置中，通过component属性动态加载iframe组件。需要将目标URL作为路由参数传递：

// router.js
const routes = [
  {
    path: '/iframe/:url',
    name: 'iframe',
    component: () => import('./components/IframeWrapper.vue'),
    props: true // 启用props接收路由参数
  }
]

Iframe封装组件

创建一个封装iframe的Vue组件，通过props接收外部传递的URL并处理安全性和样式：

vue路由实现iframe

<template>
  <div class="iframe-container">
    <iframe 
      :src="processedUrl" 
      frameborder="0" 
      allowfullscreen
      @load="handleLoad"
    />
  </div>
</template>

<script>
export default {
  props: ['url'],
  computed: {
    processedUrl() {
      // 对URL进行安全处理（如添加https或域名白名单校验）
      return this.url.startsWith('http') ? this.url : `https://${this.url}`
    }
  },
  methods: {
    handleLoad() {
      // iframe加载完成后的回调
    }
  }
}
</script>

<style scoped>
.iframe-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 100%;
}
</style>

动态导航

通过路由跳转传递目标URL参数：

// 在Vue组件中跳转
this.$router.push({
  name: 'iframe',
  params: { url: encodeURIComponent('https://example.com') }
})

或直接在模板中使用router-link：

vue路由实现iframe

<router-link 
  :to="{ name: 'iframe', params: { url: 'https://example.com' } }"
>
  打开iframe
</router-link>

安全性处理

建议添加以下安全措施：

使用encodeURIComponent对URL进行编码
实现域名白名单验证

添加sandbox属性限制iframe权限：

<iframe sandbox="allow-same-origin allow-scripts allow-popups" />

通信方案（可选）

如果需要与iframe内容通信：

// 父窗口监听消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://iframe-domain.com') return
  console.log('Received message:', event.data)
})

// iframe内发送消息
parent.postMessage('data', 'https://parent-domain.com')