elementui iframe

在 Element UI 中使用 iframe

Element UI 本身是一个基于 Vue.js 的组件库，不直接提供 iframe 组件。但可以通过原生 HTML 的 iframe 标签在 Element UI 项目中使用 iframe。

基本用法

在 Vue 模板中直接使用 <iframe> 标签：

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

结合 Element UI 组件

可以将 iframe 嵌入到 Element UI 的弹窗或卡片中：

<template>
  <el-dialog title="iframe 示例" :visible.sync="dialogVisible">
    <iframe src="https://example.com" width="100%" height="400px"></iframe>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

动态控制 iframe

可以通过 Vue 的数据绑定动态控制 iframe 的属性和行为：

<template>
  <div>
    <el-input v-model="iframeUrl" placeholder="输入 URL"></el-input>
    <el-button @click="loadIframe">加载</el-button>
    <iframe :src="currentUrl" width="100%" height="500px" ref="myIframe"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: '',
      currentUrl: ''
    }
  },
  methods: {
    loadIframe() {
      this.currentUrl = this.iframeUrl
    }
  }
}
</script>

跨域通信

如果需要与 iframe 内容进行通信，可以使用 postMessage API：

// 父窗口发送消息
window.frames[0].postMessage('hello', '*')

// 子窗口接收消息
window.addEventListener('message', (event) => {
  console.log('收到消息:', event.data)
})

注意事项

• 跨域限制：iframe 受同源策略限制，不同源的页面无法直接访问彼此的内容
• 性能考虑：过多 iframe 可能影响页面性能
• 响应式设计：需要考虑 iframe 在不同设备上的显示效果