Note
This documentation describes the WebView Vue component for native UI views, for Xml templates see web-view.
WebView
Embeds an external web page or internal URL inside an <iframe>. Supports fullscreen mode, delegated loading, and click event relaying via postMessage.
Import
import { WebView } from '@neos/app'
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
undefined |
Unique identifier for the iframe element |
title |
string |
'webview' |
Accessibility title for the iframe |
width |
string |
'100%' |
CSS width of the iframe |
height |
string |
'100%' |
CSS height of the iframe |
source |
string |
undefined |
URL to load in the iframe |
expandable |
boolean |
true |
Show the fullscreen expand button |
fullscreen |
boolean |
false |
Start in fullscreen mode |
delegatedLoading |
boolean |
true |
Use delegated/lazy iframe loading |
Emits
| Event | Payload | Description |
|---|---|---|
click |
MessageEvent |
Relayed postMessage from inside the iframe |
Usage Examples
Embedded external page
<WebView source="https://docs.example.com" title="Documentation" />
Fixed size non-expandable
<WebView source="/reports/chart" width="800px" height="600px" :expandable="false" />
Listen to postMessage events
<WebView source="/embedded-app" @click="handleMessage" />
function handleMessage(event: MessageEvent) {
console.log('iframe message', event.data)
}