Class Webview

Create new webview or get a handle to an existing one.

Webviews are identified by a label a unique identifier that can be used to reference it later. It may only contain alphanumeric characters a-zA-Z plus the following special characters -, /, : and _.

Example

import { Window } from "@tauri-apps/api/window"
import { Webview } from "@tauri-apps/api/webview"

const appWindow = new Window('uniqueLabel');

appWindow.once('tauri://created', async function () {
  // `new Webview` Should be called after the window is successfully created,
  // or webview may not be attached to the window since window is not created yet.

  // loading embedded asset:
  const webview = new Webview(appWindow, 'theUniqueLabel', {
    url: 'path/to/page.html',

    // create a webview with specific logical position and size
    x: 0,
    y: 0,
    width: 800,
    height: 600,
  });
  // alternatively, load a remote URL:
  const webview = new Webview(appWindow, 'theUniqueLabel', {
    url: 'https://github.com/tauri-apps/tauri',

    // create a webview with specific logical position and size
    x: 0,
    y: 0,
    width: 800,
    height: 600,
  });

  webview.once('tauri://created', function () {
    // webview successfully created
  });
  webview.once('tauri://error', function (e) {
    // an error happened creating the webview
  });


  // emit an event to the backend
  await webview.emit("some-event", "data");
  // listen to an event from the backend
  const unlisten = await webview.listen("event-name", e => { });
  unlisten();
});

Since

2.0.0

Hierarchy (View Summary)

Webview
- WebviewWindow

Index

Constructors

constructor

Properties

label window listeners

Constructors

constructor

new Webview(window: Window, label: string, options: WebviewOptions): Webview

Creates a new Webview.

Parameters

window: Window
the window to add this webview to.
label: string
The unique webview label. Must be alphanumeric: a-zA-Z-/:_.
options: WebviewOptions

Returns Webview

The Webview instance to communicate with the webview.

Example

import { Window } from '@tauri-apps/api/window'
import { Webview } from '@tauri-apps/api/webview'
const appWindow = new Window('my-label')

appWindow.once('tauri://created', async function() {
  const webview = new Webview(appWindow, 'my-label', {
    url: 'https://github.com/tauri-apps/tauri',

    // create a webview with specific logical position and size
    x: 0,
    y: 0,
    width: 800,
    height: 600,
  });

  webview.once('tauri://created', function () {
    // webview successfully created
  });
  webview.once('tauri://error', function (e) {
    // an error happened creating the webview
  });
});

Properties

label

label: string

The webview label. It is a unique identifier for the webview, can be used to reference it later.

window

window: Window

The window hosting this webview.

listeners

listeners: Record<string, EventCallback<any>[]>

Local event listeners.

Methods

`Static`getByLabel

getByLabel(label: string): Promise<null | Webview>
Gets the Webview for the webview associated with the given label.
Parameters
- label: string
  The webview label.
Returns Promise<null | Webview>
The Webview instance to communicate with the webview or null if the webview doesn't exist.
Example
```
import { Webview } from '@tauri-apps/api/webview';
const mainWebview = Webview.getByLabel('main');
```
- Defined in webview.ts:224

`Static`getCurrent

getCurrent(): Webview
Get an instance of Webview for the current webview.

Returns Webview
- Defined in webview.ts:231

`Static`getAll

getAll(): Promise<Webview[]>
Gets a list of instances of Webview for all available webviews.

Returns Promise<Webview[]>
- Defined in webview.ts:238

listen

listen<T>(event: EventName, handler: EventCallback<T>): Promise<UnlistenFn>
Listen to an emitted event on this webview.
Type Parameters
- T
Parameters
- event: EventName
  Event name. Must include only alphanumeric characters, -, /, : and _.
- handler: EventCallback<T>
  Event handler.
Returns Promise<UnlistenFn>
A promise resolving to a function to unlisten to the event. Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
const unlisten = await getCurrentWebview().listen<string>('state-changed', (event) => {
  console.log(`Got error: ${payload}`);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();
```
- Defined in webview.ts:261

once

once<T>(event: EventName, handler: EventCallback<T>): Promise<UnlistenFn>
Listen to an emitted event on this webview only once.
Type Parameters
- T
Parameters
- event: EventName
  Event name. Must include only alphanumeric characters, -, /, : and _.
- handler: EventCallback<T>
  Event handler.
Returns Promise<UnlistenFn>
A promise resolving to a function to unlisten to the event. Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
const unlisten = await getCurrent().once<null>('initialized', (event) => {
  console.log(`Webview initialized!`);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();
```
- Defined in webview.ts:296

emit

emit<T>(event: string, payload?: T): Promise<void>
Emits an event to all targets.
Type Parameters
- T
Parameters
- event: string
  Event name. Must include only alphanumeric characters, -, /, : and _.
- Optionalpayload: T
  Event payload.
Returns Promise<void>
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().emit('webview-loaded', { loggedIn: true, token: 'authToken' });
```
- Defined in webview.ts:324

emitTo

emitTo<T>(
    target: string | EventTarget,
    event: string,
    payload?: T,
): Promise<void>
Emits an event to all targets matching the given target.
Type Parameters
- T
Parameters
- target: string | EventTarget
  Label of the target Window/Webview/WebviewWindow or raw EventTarget object.
- event: string
  Event name. Must include only alphanumeric characters, -, /, : and _.
- Optionalpayload: T
  Event payload.
Returns Promise<void>
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().emitTo('main', 'webview-loaded', { loggedIn: true, token: 'authToken' });
```
- Defined in webview.ts:352

position

position(): Promise<dpi.PhysicalPosition>
The position of the top-left hand corner of the webview's client area relative to the top-left hand corner of the desktop.

Returns Promise<dpi.PhysicalPosition>
The webview's position.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
const position = await getCurrentWebview().position();
```
- Defined in webview.ts:397

size

size(): Promise<dpi.PhysicalSize>
The physical size of the webview's client area. The client area is the content of the webview, excluding the title bar and borders.

Returns Promise<dpi.PhysicalSize>
The webview's size.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
const size = await getCurrentWebview().size();
```
- Defined in webview.ts:414

close

close(): Promise<void>
Closes the webview.

Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().close();
```
- Defined in webview.ts:435

setSize

setSize(size: dpi.LogicalSize | dpi.PhysicalSize | Size): Promise<void>
Resizes the webview.
Parameters
- size: dpi.LogicalSize | dpi.PhysicalSize | Size
  The logical or physical size.
Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrent, LogicalSize } from '@tauri-apps/api/webview';
await getCurrentWebview().setSize(new LogicalSize(600, 500));
```
- Defined in webview.ts:452

setPosition

setPosition(
position: dpi.LogicalPosition | dpi.PhysicalPosition | Position,
): Promise<void>
Sets the webview position.
Parameters
- position: dpi.LogicalPosition | dpi.PhysicalPosition | Position
  The new position, in logical or physical pixels.
Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrent, LogicalPosition } from '@tauri-apps/api/webview';
await getCurrentWebview().setPosition(new LogicalPosition(600, 500));
```
- Defined in webview.ts:470

setFocus

setFocus(): Promise<void>
Bring the webview to front and focus.

Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setFocus();
```
- Defined in webview.ts:489

setAutoResize

setAutoResize(autoResize: boolean): Promise<void>
Sets whether the webview should automatically grow and shrink its size and position when the parent window resizes.
Parameters
- autoResize: boolean
Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setAutoResize(true);
```
- Defined in webview.ts:505

hide

hide(): Promise<void>
Hide the webview.

Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().hide();
```
- Defined in webview.ts:522

show

show(): Promise<void>
Show the webview.

Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().show();
```
- Defined in webview.ts:538

setZoom

setZoom(scaleFactor: number): Promise<void>
Set webview zoom level.
Parameters
- scaleFactor: number
Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().setZoom(1.5);
```
- Defined in webview.ts:554

reparent

reparent(window: string | Window | WebviewWindow): Promise<void>
Moves this webview to the given label.
Parameters
- window: string | Window | WebviewWindow
Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().reparent('other-window');
```
- Defined in webview.ts:571

clearAllBrowsingData

clearAllBrowsingData(): Promise<void>
Clears all browsing data for this webview.

Returns Promise<void>
A promise indicating the success or failure of the operation.
Example
```
import { getCurrentWebview } from '@tauri-apps/api/webview';
await getCurrentWebview().clearAllBrowsingData();
```
- Defined in webview.ts:588

setBackgroundColor

setBackgroundColor(color: null | webview.Color): Promise<void>
Specify the webview background color.

Platfrom-specific:
- macOS / iOS: Not implemented.
- Windows:
  - On Windows 7, transparency is not supported and the alpha value will be ignored.
  - On Windows higher than 7: translucent colors are not supported so any alpha value other than 0 will be replaced by 255
Parameters
- color: null | webview.Color
Returns Promise<void>
A promise indicating the success or failure of the operation.

Since
2.1.0
- Defined in webview.ts:606

onDragDropEvent

onDragDropEvent(
handler: EventCallback<webview.DragDropEvent>,
): Promise<UnlistenFn>
Listen to a file drop event. The listener is triggered when the user hovers the selected files on the webview, drops the files or cancels the operation.
Parameters
- handler: EventCallback<webview.DragDropEvent>
Returns Promise<UnlistenFn>
A promise resolving to a function to unlisten to the event. Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
Example
```
import { getCurrentWebview } from "@tauri-apps/api/webview";
const unlisten = await getCurrentWebview().onDragDropEvent((event) => {
 if (event.payload.type === 'over') {
   console.log('User hovering', event.payload.position);
 } else if (event.payload.type === 'drop') {
   console.log('User dropped', event.payload.paths);
 } else {
   console.log('File drop cancelled');
 }
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();
```
When the debugger panel is open, the drop position of this event may be inaccurate due to a known limitation. To retrieve the correct drop position, please detach the debugger.
- Defined in webview.ts:640

Class Webview

Example

Since

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Webview

Example

Properties

label

window

listeners

Methods

StaticgetByLabel

Parameters

Returns Promise<null | Webview>

Example

StaticgetCurrent

Returns Webview

StaticgetAll

Returns Promise<Webview[]>

listen

Type Parameters

Parameters

Returns Promise<UnlistenFn>

Example

once

Type Parameters

Parameters

Returns Promise<UnlistenFn>

Example

emit

Type Parameters

Parameters

Returns Promise<void>

Example

emitTo

Type Parameters

Parameters

Returns Promise<void>

Example

position

Returns Promise<dpi.PhysicalPosition>

Example

size

Returns Promise<dpi.PhysicalSize>

Example

close

Returns Promise<void>

Example

setSize

Parameters

Returns Promise<void>

Example

setPosition

Parameters

Returns Promise<void>

Example

setFocus

Returns Promise<void>

Example

setAutoResize

Parameters

Returns Promise<void>

Example

hide

Returns Promise<void>

Example

show

Returns Promise<void>

Example

setZoom

Parameters

Returns Promise<void>

Example

`Static`getByLabel

`Static`getCurrent

`Static`getAll