---
name: "web-view"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "web-view - Container for hosting web pages"
---

## web-view

> [VERSION] Base Library >= 2.10.0

### Description

WebView component for embedding web content.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `src` | `string` | Yes | `""` | Web link |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `message` | `(event: WebViewMessageEvent) => void` | Fires when the web page sends a postMessage to the mini program |
| `load` | `(event: WebViewLoadEvent) => void` | Fires when the web page loads successfully |
| `error` | `(event: WebViewErrorEvent) => void` | Fires when the web page fails to load |

**WebViewMessageEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"message"` | Event type |
| `detail` | `unknown` | Message data sent from webview to the mini program |

**WebViewLoadEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"load"` | Event type |
| `detail` | `WebViewLoadDetail` | Event data |

**WebViewErrorEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"error"` | Event type |
| `detail` | `WebViewErrorDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
<web-view
  src="{{url}}"
  bindload="onLoad"
  binderror="onError"
></web-view>
```

*index.tyss*

```css
web-view {
  width: 100%;
  height: 100vh;
}
```

*index.js*

```javascript
Page({
  data: {
    url: 'https://www.tuya.com',
  },
  onLoad(e) {
    console.log('Page loaded successfully:', e.detail.src);
  },
  onError(e) {
    console.log('Page load failed:', e.detail.errMsg);
  },
});
```

#### Listen for webpage messages

*index.tyml*

```xml
<web-view
  src="{{url}}"
  bindmessage="onMessage"
  bindload="onLoad"
></web-view>
```

*index.tyss*

```css
web-view {
  width: 100%;
  height: 100vh;
}
```

*index.js*

```javascript
Page({
  data: {
    url: 'https://www.tuya.com',
  },
  onMessage(e) {
    console.log('Received page message:', e.detail);
  },
  onLoad(e) {
    console.log('Load complete:', e.detail.src);
  },
});
```


### Related Documents

When a web page posts a message to the miniapp, use [@tuya-miniapp/jssdk](https://www.npmjs.com/package/@tuya-miniapp/jssdk). For detailed usage, refer to the [jssdk documentation](https://www.npmjs.com/package/@tuya-miniapp/jssdk).