Tauri WebviewWindow

名字创建新的 Web 视图窗口并获取现有窗口的句柄。

窗口由标签标识，标签是唯一标识符，可用于以后引用它。 它只能包含字母数字字符以及以下特殊字符 、 和 。a-zA-Z-/:_

例

// loading embedded asset:
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html'
});
// alternatively, load a remote URL:
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'https://github.com/tauri-apps/tauri'
});

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

// 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: 1.0.2

等级制度

• WindowManager
  • WebviewWindow

构造 函数

constructor

new WebviewWindow(: , : WindowOptions): WebviewWindowlabelstringoptions?

创建新的 WebviewWindow。

例

import { WebviewWindow } from '@tauri-apps/api/window';
const webview = new WebviewWindow('my-label', {
  url: 'https://github.com/tauri-apps/tauri'
});
webview.once('tauri://created', function () {
 // webview window successfully created
});
webview.once('tauri://error', function (e) {
 // an error happened creating the webview window
});

参数

重写：WindowManager.构造函数

Defined in: window.ts:2001

性能​

label​

label: string

窗口标签。它是窗口的唯一标识符，可用于以后引用它。

继承自：WindowManager.标签

Defined in: window.ts:315

listeners​

listeners: Record<, EventCallbackstring<any>[]>

本地事件侦听器。

继承自：WindowManager.listeners （窗口管理器.侦听器）

Defined in: window.ts:317

方法​

center​

center(): Promise<void>

将窗口居中。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.center();

Returns: Promise<void>

指示操作成功或失败的承诺。

close​

close(): Promise<void>

关闭窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.close();

Returns: Promise<void>

指示操作成功或失败的承诺。

emit​

emit(: , : ): Promiseeventstringpayload?unknown<void>

向后端发出一个事件，该事件绑定到 webview 窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.emit('window-loaded', { loggedIn: true, token: 'authToken' });

参数

Returns: Promise<void>

hide​

hide(): Promise<void>

将窗口可见性设置为 false。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.hide();

Returns: Promise<void>

指示操作成功或失败的承诺。

innerPosition​

innerPosition(): Promise<PhysicalPosition>

窗口工作区的左上角相对于桌面左上角的位置。

例

import { appWindow } from '@tauri-apps/api/window';
const position = await appWindow.innerPosition();

Returns: Promise<PhysicalPosition>

窗口的内部位置。

innerSize​

innerSize(): Promise<PhysicalSize>

窗口工作区的物理大小。 工作区是窗口的内容，不包括标题栏和边框。

例

import { appWindow } from '@tauri-apps/api/window';
const size = await appWindow.innerSize();

Returns: Promise<PhysicalSize>

窗口的内部大小。

isDecorated​

isDecorated(): Promise<boolean>

获取窗口的当前修饰状态。

例

import { appWindow } from '@tauri-apps/api/window';
const decorated = await appWindow.isDecorated();

Returns: Promise<boolean>

窗户是否装饰。

isFullscreen​

isFullscreen(): Promise<boolean>

获取窗口的当前全屏状态。

例

import { appWindow } from '@tauri-apps/api/window';
const fullscreen = await appWindow.isFullscreen();

Returns: Promise<boolean>

窗口是否处于全屏模式。

isMaximized​

isMaximized(): Promise<boolean>

获取窗口的当前最大化状态。

例

import { appWindow } from '@tauri-apps/api/window';
const maximized = await appWindow.isMaximized();

Returns: Promise<boolean>

窗口是否最大化。

isMinimized​

isMinimized(): Promise<boolean>

获取窗口的当前最小化状态。

例

import { appWindow } from '@tauri-apps/api/window';
const minimized = await appWindow.isMinimized();

Since: 1.3.0

Returns: Promise<boolean>

isResizable​

isResizable(): Promise<boolean>

获取窗口的当前可调整大小状态。

例

import { appWindow } from '@tauri-apps/api/window';
const resizable = await appWindow.isResizable();

Returns: Promise<boolean>

窗口的大小是否可调整。

isVisible​

isVisible(): Promise<boolean>

获取窗口的当前可见状态。

例

import { appWindow } from '@tauri-apps/api/window';
const visible = await appWindow.isVisible();

Returns: Promise<boolean>

窗口是否可见。

listen​

listen<>(: EventName, : EventCallback<>): Promise<UnlistenFnTeventhandlerT>

侦听绑定到 webview 窗口的后端发出的事件。

例

import { appWindow } from '@tauri-apps/api/window';
const unlisten = await appWindow.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();

类型参数

• T

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

maximize​

maximize(): Promise<void>

最大化窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.maximize();

Returns: Promise<void>

指示操作成功或失败的承诺。

minimize​

minimize(): Promise<void>

最小化窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.minimize();

Returns: Promise<void>

指示操作成功或失败的承诺。

onCloseRequested​

onCloseRequested(: ): Promise<UnlistenFnhandlerfn>

收听请求的窗口关闭。在用户请求关闭窗口时发出。

例

import { appWindow } from "@tauri-apps/api/window";
import { confirm } from '@tauri-apps/api/dialog';
const unlisten = await appWindow.onCloseRequested(async (event) => {
  const confirmed = await confirm('Are you sure?');
  if (!confirmed) {
    // user did not confirm closing the window; let's prevent it
    event.preventDefault();
  }
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onFileDropEvent​

onFileDropEvent(: EventCallback<FileDropEvent>): Promise<UnlistenFnhandler>

侦听文件删除事件。 当用户将所选文件悬停在窗口上时，将触发侦听器， 删除文件或取消操作。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onFileDropEvent((event) => {
 if (event.payload.type === 'hover') {
   console.log('User hovering', event.payload.paths);
 } 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();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onFocusChanged​

onFocusChanged(: EventCallback<>): Promise<UnlistenFnhandlerboolean>

聆听窗口焦点变化。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onFocusChanged(({ payload: focused }) => {
 console.log('Focus changed, window is focused? ' + focused);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onMenuClicked​

onMenuClicked(: EventCallback<>): Promise<UnlistenFnhandlerstring>

听窗口菜单项单击。有效负载是项目 ID。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onMenuClicked(({ payload: menuId }) => {
 console.log('Menu clicked: ' + menuId);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onMoved​

onMoved(: EventCallback<PhysicalPosition>): Promise<UnlistenFnhandler>

听窗口移动。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onMoved(({ payload: position }) => {
 console.log('Window moved', position);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onResized​

onResized(: EventCallback<PhysicalSize>): Promise<UnlistenFnhandler>

收听窗口调整大小。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onResized(({ payload: size }) => {
 console.log('Window resized', size);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onScaleChanged​

onScaleChanged(: EventCallback<ScaleFactorChanged>): Promise<UnlistenFnhandler>

监听窗口比例变化。在窗口的缩放因子更改时发出。 以下用户操作可能会导致 DPI 更改：

• 更改显示器的分辨率。
• 更改显示器的比例因子（例如，在 Windows 的控制面板中）。
• 将窗口移动到具有不同比例因子的显示器。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onScaleChanged(({ payload }) => {
 console.log('Scale changed', payload.scaleFactor, payload.size);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

onThemeChanged​

onThemeChanged(: EventCallback<Theme>): Promise<UnlistenFnhandler>

听系统主题变化。

例

import { appWindow } from "@tauri-apps/api/window";
const unlisten = await appWindow.onThemeChanged(({ payload: theme }) => {
 console.log('New theme: ' + theme);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

Since: 1.0.2

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

once​

once<>(: , : EventCallback<>): Promise<UnlistenFnTeventstringhandlerT>

侦听绑定到 webview 窗口的后端发出的一次性事件。

例

import { appWindow } from '@tauri-apps/api/window';
const unlisten = await appWindow.once<null>('initialized', (event) => {
  console.log(`Window initialized!`);
});

// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
unlisten();

类型参数

• T

参数

Returns: Promise<UnlistenFn>

解析为函数以取消侦听事件的承诺。 请注意，如果您的侦听器超出范围（例如，组件已卸载），则需要删除侦听器。

outerPosition​

outerPosition(): Promise<PhysicalPosition>

The position of the top-left hand corner of the window relative to the top-left hand corner of the desktop.

Example

import { appWindow } from '@tauri-apps/api/window';
const position = await appWindow.outerPosition();

Returns: Promise<PhysicalPosition>

T窗口的外部位置。

outerSize​

outerSize(): Promise<PhysicalSize>

整个窗口的物理大小。 这些维度包括标题栏和边框。如果您不想要（而且通常不想要），请改用inner_size。

例

import { appWindow } from '@tauri-apps/api/window';
const size = await appWindow.outerSize();

Returns: Promise<PhysicalSize>

窗口的外部大小。

requestUserAttention​

requestUserAttention(: | UserAttentionType): PromiserequestTypenull<void>

请求用户注意窗口，如果应用程序 已经专注了。请求用户注意力清单如何取决于平台， 有关详细信息，请参阅。UserAttentionType

提供将取消设置用户注意请求。取消设置 当窗口接收到输入时，WM 可能不会自动完成用户注意力。null

特定于平台

• macOS：没有效果。null
• Linux系统：紧急程度具有相同的效果。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.requestUserAttention();

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

scaleFactor​

scaleFactor(): Promise<number>

可用于将物理像素映射到逻辑像素的比例因子。

例

import { appWindow } from '@tauri-apps/api/window';
const factor = await appWindow.scaleFactor();

Returns: Promise<number>

窗口的监视器缩放比例。

setAlwaysOnTop​

setAlwaysOnTop(: ): PromisealwaysOnTopboolean<void>

窗口是否应始终位于其他窗口的顶部。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setAlwaysOnTop(true);

数

Returns: Promise<void>

指示操作成功或失败的承诺。

setContentProtected​

setContentProtected(: ): Promiseprotected_boolean<void>

防止窗口内容被其他应用捕获。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setContentProtected(true);

Since: 1.2.0

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setCursorGrab​

setCursorGrab(: ): Promisegrabboolean<void>

抓取光标，防止其离开窗口。

不能保证光标会被隐藏。你应该 如果你愿意，可以自己隐藏它。

特定于平台

• Linux系统：支持。
• macOS操作系统：这会将光标锁定在固定位置，这在视觉上看起来很尴尬。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setCursorGrab(true);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setCursorIcon​

setCursorIcon(: CursorIcon): Promiseicon<void>

修改窗口的光标图标。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setCursorIcon('help');

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setCursorPosition​

setCursorPosition(: PhysicalPosition | LogicalPosition): Promiseposition<void>

更改光标在窗口坐标中的位置。

例

import { appWindow, LogicalPosition } from '@tauri-apps/api/window';
await appWindow.setCursorPosition(new LogicalPosition(600, 300));

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setCursorVisible​

etCursorVisible(: ): Promisevisibleboolean<void>

修改光标的可见性。

特定于平台

• 窗户：光标仅隐藏在窗口范围内。
• macOS操作系统：只要窗口具有输入焦点，光标就会隐藏，即使光标是 窗外。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setCursorVisible(false);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setDecorations​

setDecorations(: ): Promisedecorationsboolean<void>

窗口是否应具有边框和条形。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setDecorations(false);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setFocus​

setFocus(): Promise<void>

将窗户放在前面并聚焦。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setFocus();

Returns: Promise<void>

指示操作成功或失败的承诺。

setFullscreen​

setFullscreen(: ): Promisefullscreenboolean<void>

设置窗口全屏状态。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setFullscreen(true);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setIcon​

setIcon(: | Uint8Array): Promiseiconstring<void>

设置窗口图标。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setIcon('/tauri/awesome.png');

请注意，您需要 或 Cargo 功能才能使用此 API。 要启用它，请更改您的 Cargo.toml 文件：icon-icoicon-png

[dependencies]
tauri = { version = "...", features = ["...", "icon-png"] }

参数

Returns: Promise<void> 

指示操作成功或失败的承诺。

setIgnoreCursorEvents​

setIgnoreCursorEvents(: ): Promiseignoreboolean<void>

更改游标事件行为。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setIgnoreCursorEvents(true);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setMaxSize​

setMaxSize(: | | PhysicalSize | LogicalSize): Promisesizeundefinednull<void>

设置窗口最大内部大小。如果参数未定义，则未设置约束。size

例

import { appWindow, LogicalSize } from '@tauri-apps/api/window';
await appWindow.setMaxSize(new LogicalSize(600, 500));

参数

Returns: Promise<void> 

指示操作成功或失败的承诺。

setMinSize​

setMinSize(: | | PhysicalSize | LogicalSize): Promisesizeundefinednull<void>

设置窗口的最小内部大小。如果未提供参数，则取消设置约束。size

例

import { appWindow, PhysicalSize } from '@tauri-apps/api/window';
await appWindow.setMinSize(new PhysicalSize(600, 500));

参数

Returns: Promise<void> 

指示操作成功或失败的承诺。

setPosition​

setPosition(: PhysicalPosition | LogicalPosition): Promiseposition<void>

设置窗口外部位置。

例

import { appWindow, LogicalPosition } from '@tauri-apps/api/window';
await appWindow.setPosition(new LogicalPosition(600, 500));

参数

Returns: Promise<void> 

指示操作成功或失败的承诺。

setResizable​

setResizable(: ): Promiseresizableboolean<void>

更新窗口可调整大小的标志。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setResizable(false);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setSize​

setSize(: PhysicalSize | LogicalSize): Promisesize<void>

使用新的内部大小调整窗口大小。

例

import { appWindow, LogicalSize } from '@tauri-apps/api/window';
await appWindow.setSize(new LogicalSize(600, 500));

参数

Returns: Promise<void> 

指示操作成功或失败的承诺。

setSkipTaskbar​

setSkipTaskbar(: ): Promiseskipboolean<void>

是否应从任务栏中隐藏窗口图标。

特定于平台

• macOS操作系统：支持。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setSkipTaskbar(true);

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

setTitle​

setTitle(: ): Promisetitlestring<void>

设置窗口标题。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.setTitle('Tauri');

参数

Returns: Promise<void>

指示操作成功或失败的承诺。

show​

show(): Promise<void>

将窗口可见性设置为 true。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.show();

Returns: Promise<void>

指示操作成功或失败的承诺。

startDragging​

startDragging(): Promise<void>

开始拖动窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.startDragging();

Returns: Promise<void>

指示操作成功或失败的承诺。

theme​

theme(): Promise< | Themenull>

获取窗口的当前主题。

特定于平台

• macOS操作系统：主题是在 macOS 10.14 上引入的。在 macOS 10.13 及更低版本上返回。light

例

import { appWindow } from '@tauri-apps/api/window';
const theme = await appWindow.theme();

Returns: Promise< | Themenull>

窗口主题。

title​

title(): Promise<string>

获取窗口的当前标题。

例

import { appWindow } from '@tauri-apps/api/window';
const title = await appWindow.title();

Since: 1.3.0

Returns: Promise<string>

toggleMaximize​

toggleMaximize(): Promise<void>

切换窗口最大化状态。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.toggleMaximize();

Returns: Promise<void>

指示操作成功或失败的承诺。

unmaximize​

unmaximize(): Promise<void>

取消最大化窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.unmaximize();

Returns: Promise<void>

指示操作成功或失败的承诺。

unminimize​

unminimize(): Promise<void>

取消最小化窗口。

例

import { appWindow } from '@tauri-apps/api/window';
await appWindow.unminimize();

Returns: Promise<void>

指示操作成功或失败的承诺。

getByLabel​

Static getByLabel(: ): | WebviewWindowlabelstringnull

获取与给定标签关联的 Webview 的 WebviewWindow。

例

import { WebviewWindow } from '@tauri-apps/api/window';
const mainWindow = WebviewWindow.getByLabel('main');

参数

Returns: | ​WebviewWindow​​null​

要与 webview 通信的 WebviewWindow 实例，如果 webview 不存在，则为 null。