WebView 网页容器

说明

基于 iframe 封装的网页容器组件，简化内嵌页面的传入方式，并自动管理 postMessage 的双向通信。

• 自动适配容器宽高，默认 100%
• 支持通过 attrs 透传原生 <iframe> 属性（allow、referrerpolicy、sandbox 等）
• 内置 postMessage 发送与 message 事件接收，自动按 event.source 过滤非本 iframe 的消息
• 支持 reload 刷新（同源用 location.reload，跨域自动回退到 src 重设）

用法示例

基础用法

选择目标源：

选择目标源

发送消息：

<template>
  <div>
    <div class="web-view-demo-container">
      <y-web-view
        :src="targetOrigin"
        ref="webViewRef"
        width="100%"
        height="400px"
        border="1px solid red"
        @load="handleLoad"
        @message="handleMessage" />
    </div>

    <div style="display: flex;gap: 10px;align-items: center;margin-top: 10px;">
      <span>选择目标源：</span>
      <el-select
        v-model="targetOrigin"
        placeholder="选择目标源"
        :options="targetOriginOptions"
        style="width:200px"></el-select>
      <span>发送消息：</span>
      <el-input
        v-model="message"
        placeholder="发送消息"
        style="width:200px"></el-input>
      <y-button @click="postMessage">发送消息</y-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'

const webViewRef = ref();
const targetOriginOptions = [
  { label: 'YUN-ELP', value: 'http://localhost:5173/yun-elp/' },
  { label: 'caniuse', value: 'https://caniuse.com/' },
  { label: 'example.org', value: 'https://example.org/' },
  {label:"百度",value:'https://www.baidu.com/'},
]
const targetOrigin = ref('')
const message = ref('')

const handleLoad = (event) => {
  console.log('web-view handleLoad', event);
  ElMessage.info('web-view加载事件：'+JSON.stringify(event))
}

// 接收消息
const handleMessage = (event) => {
  ElMessage.info('web-view消息事件：'+JSON.stringify(event))
}

// 发送消息
const postMessage = () => {
  webViewRef.value?.postMessage(message.value)
}
</script>

<style scoped></style>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
src	内嵌页面地址	string	—
width	容器宽度	string	'100%'
height	容器高度	string	'100%'
border	iframe 边框样式	string	'0'

除以上属性外，其他原生 <iframe> 属性和事件见 iframe：内嵌框架元素，均可通过 attrs 透传。

Slots

该组件不含插槽。

Events

事件名	说明	类型
message	接收到来自内嵌页面的 postMessage 消息时触发	Function

Exposes

名称	说明	类型
iframeRef	iframe DOM 元素引用	object
postMessage	向内嵌页面发送消息	Function
reload	刷新内嵌页面	Function