跳至正文
版本：bleeding-edge 🩸

🖥️ WebUI

用于生成动态网页浏览器的类。

Client Only🧑‍💻API Source
👪Inheritance
This class shares methods and events from Base Entity.
提示

我们的 WebUI 实现是基于最新版本的 Chromium Embedded Framework 构建的。

提示

如需访问浏览器内远程调试，请在连接到服务器后前往 http://localhost:9222

专有编解码器

公共 CEF 构建版不支持 MPEG-4 (.mp4)、H.264、H.265 和 AAC 等专有编解码器。 我们建议将你的媒体文件转换为 WEBM 或 OGG。

🎒 示例​

Client/Index.lua
-- 加载本地文件
local my_ui = WebUI(
    "Awesome UI",            -- 名称
    "file://UI/index.html",  -- 相对于此包的路径 (Client/)
    WidgetVisibility.Visible  -- 在屏幕上可见
)

-- 加载 Web URL
local my_browser = WebUI(
    "Awesome Site",          -- 名称
    "https://nanos-world.com",   -- 网页 URL
    WidgetVisibility.Visible  -- 在屏幕上可见
)

-- 从其他包加载本地文件
local my_ui = WebUI(
    "Awesome Other UI",      -- 名称
    "file://other-package/Client/UI/index.html",
    WidgetVisibility.Visible  -- 在屏幕上可见
)

将 WebUI 用作网格体材质​

Client/Index.lua
-- 生成一个 is_visible = false，is_transparent = false，auto_resize = false 且尺寸为 500x500 的 WebUI
local my_ui = WebUI("Awesome Site", "https://nanos-world.com", false, false, false, 500, 500)

-- 生成一个 StaticMesh（可以是任何网格体）
local static_mesh = StaticMesh(Vector(0, 0, 100), Rotator(), "nanos-world::SM_Cube")

-- 将网格体材质设置为使用该 WebUI
static_mesh:SetMaterialFromWebUI(my_ui)

在 Lua 和 JS (WebUI) 之间通信​

Client/Index.lua
local my_ui = WebUI("Awesome UI", "file://UI/index.html")

local param1 = 123
local param2 = "hello"

-- 调用 JS 事件
my_ui:CallEvent("MyEvent", param1, param2)

-- 订阅以接收 JS 事件
my_ui:Subscribe("MyAnswer", function(param1)
    Console.Log("Received back! %s", param1)
    -- 将输出 'Received back! Hey there!'
end)
script.js
// 注册来自 Lua 的 "MyEvent"
Events.Subscribe("MyEvent", function(param1, param2) {
    console.log("Triggered! " + param1 + " " + param2);
    // 将输出 'Triggered! 123 hello'

    // 触发 Lua 上的 "MyAnswer"
    Events.Call("MyAnswer", "Hey there!");
});

// 也可以取消订阅事件以使其停止触发
Events.Unsubscribe("MyEvent");

美观滚动条​

自从我们从 Webkit 迁移到 CEF 后，部分滚动条变得不太美观。 这里有一段 CSS 小代码片段，可以使它们看起来接近 Webkit 样式：

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #494949;
}

body {
    scrollbar-gutter: stable both-edges;
}

更多相关示例：

用户界面core-concepts/scripting/user-interface 基本 HUD（HTML）getting-started/tutorials-and-examples/basic-hud-html
提示

你可以使用 :SetMaterialFromWebUI() 方法将画布输出的纹理进行应用！

📚 库和框架​

以下是利用 WebUI 拓展其可能性的社区创建库和框架列表：

EGUI

由 MegaThorx 开发的创建用户界面的框架

WebUI3d2d

由 Timmy 开发的在 3D 世界中生成可交互 WebUI 的工具

UI Framework

由 Voltaism 移植的强大 UI 框架

🛠 构造函数​

Default Constructor​

No description provided

local my_webui = WebUI(name, path, visibility?, is_transparent?, auto_resize?, width?, height?)

Parameters

TypeNameDefaultDescription
stringname Required parameter 用于调试日志
HTML Pathpath Required parameter 网页 URL 或 HTML 文件路径，例如 file://my_file.html
WidgetVisibilityvisibilityWidgetVisibility.VisibleWebUI 在屏幕上是否可见
booleanis_transparenttrueWebUI 背景是否透明
booleanauto_resizetrue当屏幕尺寸改变时是否自动调整大小（在使用 WebUI 绘制网格模型表面时，关闭此项很有用）
integerwidth0不使用 auto_resize 时 WebUI 的宽度大小
integerheight0不使用 auto_resize 时 WebUI 的高度大小

🔍 HTML 路径搜索器​

加载 .html 文件支持以下搜索路径，并按以下顺序查找：

  1. 相对于 current-file-path/
  2. 相对于 current-package/Client/
  3. 相对于 current-package/
  4. 相对于 Packages/

🗿 静态函数​

Inherited Entity Static Functions
WebUI inherits from Base Entity Class, sharing it's methods and functions:
Base Entityscripting-reference/classes/base-classes/entity
ReturnsNameDescription
table of Base EntityGetAll返回一个包含调用此方法的类中所有实体的表
Base EntityGetByIndex返回该类中指定索引处的特定实体
integerGetCount返回该类当前存在的实体数量
table of tableGetInheritedClasses获取使用 继承系统 创建的、直接继承自该类的所有子类列表
iteratorGetPairs返回一个包含该类所有实体的迭代器，用于 pairs() 循环
table or nilGetParentClass如果该类是使用 继承系统 创建的，则获取其父类
tableInherit使用 继承系统 继承此类
booleanIsChildOf如果该类是使用 继承系统 创建的，检查此类是否为另一个类的子类
functionSubscribe为该类的所有实体订阅一个 事件
functionSubscribeRemote订阅从服务器调用的自定义远程事件
Unsubscribe退订此包内该类中此 事件 的所有回调，或者仅取消传入的特定回调

This class doesn't have own static functions.

🦠 函数​

Inherited Entity Functions
WebUI inherits from Base Entity Class, sharing it's methods and functions:
Base Entityscripting-reference/classes/base-classes/entity
ReturnsNameDescription
BroadcastRemoteEvent直接在此实体上向所有玩家调用自定义远程事件
BroadcastRemoteInRadiusEvent直接针对此实体调用自定义远程事件，并将该事件传递给半径范围内的所有玩家
CallRemoteEvent直接在此实体上向特定玩家调用自定义远程事件
CallRemoteEvent直接在此实体上调用自定义远程事件
CallRemotePlayersEvent直接在此实体上调用自定义远程事件，并将事件传递给玩家列表
Destroy销毁该实体
FinishSpawn如果此实体是以延迟 spawn_mode 生成的，则完成生成过程并将该实体发送至客户端
table of stringGetAllValuesKeys获取所有值键的列表
tableGetClass获取该实体的类
integerGetID获取该实体的全网通用网络 ID（在客户端和服务器上相同）
anyGetValue获取此实体上存储在给定键处的 值
booleanHasAuthority获取本地上下文是否对此实体拥有主控（如果由客户端生成则为 true，由服务器生成则为 false）
booleanIsA递归检查此实体是否继承自某个类
booleanIsBeingDestroyed如果该实体正在被销毁，则返回 true
booleanIsSpawned获取此实体是否已完成生成
booleanIsValid如果该实体有效（即未被销毁且指向一个有效的实体），则返回 true
SetSpawnMode从继承类的构造函数中覆盖此实体完成生成的时间点
SetValue在此实体中设置一个值
functionSubscribe在这个特定实体上订阅一个事件
functionSubscribeRemote在这个特定实体上订阅一个从服务器调用的自定义远程事件
Unsubscribe退订此包内该实体中此 事件 的所有回调，或者仅取消传入的特定回调
ReturnsNameDescription
BringToFront将此 WebUI 置于所有 WebUI 和控件的最前端
CallEvent在浏览器的 JavaScript 中调用一个事件
CloseDevTools关闭此 WebUI 的开发者工具，仅在未禁用 Client.SetDebugEnabled() 时有效
ExecuteJavaScript在浏览器中执行一段 JavaScript 代码
stringGetName获取此 WebUI 的名称
Vector2DGetSize获取此 WebUI 的当前尺寸
WidgetVisibilityGetVisibility返回当前 WebUI 的可见性
HasNodeFocus返回此 WebUI 是否有任何 DOM 节点处于聚焦状态
booleanIsFrozen返回此 WebUI 当前是否处于冻结状态
booleanIsReady返回此 WebUI 是否已准备就绪
LoadHTML在此浏览器中加载纯 HTML 内容
LoadURL在此浏览器中加载一个新的文件或 URL
OpenDevTools打开此 WebUI 的开发者工具，仅在未禁用 Client.SetDebugEnabled() 时有效
RemoveFocus移除此 WebUI 的焦点（并将焦点设回游戏视口）
SendKeyEvent通过编程方式向 WebUI 发送按键事件
SendMouseClickEvent通过编程方式向 WebUI 发送鼠标点击事件
SendMouseMoveEvent通过编程方式向 WebUI 发送鼠标移动事件
SendMouseWheelEvent通过编程方式向 WebUI 发送鼠标滚轮事件
SetFocus启用此浏览器的焦点（即可以接收键盘输入并会触发输入事件）
SetFreeze冻结 WebUI 在表面上的渲染（底层仍会继续执行 JS）
SetLayout将布局设为屏幕上的画布
SetVisibility设置其在屏幕上的可见性
SoundSpawnSound生成一个声音实体来播放此 WebUI 的声音
Optimal

BringToFront​

将此 WebUI 置于所有 WebUI 和控件的最前端
my_webui:BringToFront()
Moderate

CallEvent​

在浏览器的 JavaScript 中调用一个事件
my_webui:CallEvent(event_name, args...)

Parameters

TypeParameterDefaultDescription
stringevent_name Required parameter 用于触发事件的事件名称
anyargs... Required parameter 传递给事件的参数
Optimal

CloseDevTools​

关闭此 WebUI 的开发者工具，仅在未禁用 Client.SetDebugEnabled() 时有效
my_webui:CloseDevTools()
Optimal

ExecuteJavaScript​

在浏览器中执行一段 JavaScript 代码
注：此方法为实验性功能，应谨慎使用。在包与 WebUI 之间进行通信时，事件仍是首选方式。
my_webui:ExecuteJavaScript(javascript_code)

Parameters

TypeParameterDefaultDescription
stringjavascript_code Required parameter No description provided
Optimal

GetName​

获取此 WebUI 的名称
local name = my_webui:GetName()

Returns

TypeDescription
stringname
Optimal

GetSize​

获取此 WebUI 的当前尺寸
local ret = my_webui:GetSize()

Returns

TypeDescription
Vector2DNo description provided
Optimal

GetVisibility​

返回当前 WebUI 的可见性
local visibility = my_webui:GetVisibility()

Returns

TypeDescription
WidgetVisibilityvisibility

See also SetVisibility.

Optimal

HasNodeFocus​

返回此 WebUI 是否有任何 DOM 节点处于聚焦状态
my_webui:HasNodeFocus()
Optimal

IsFrozen​

返回此 WebUI 当前是否处于冻结状态
local freeze = my_webui:IsFrozen()

Returns

TypeDescription
booleanfreeze
Optimal

IsReady​

返回此 WebUI 是否已准备就绪
local ready = my_webui:IsReady()

Returns

TypeDescription
booleanready
Optimal

LoadHTML​

在此浏览器中加载纯 HTML 内容
my_webui:LoadHTML(html)

Parameters

TypeParameterDefaultDescription
stringhtml Required parameter No description provided
Optimal

LoadURL​

在此浏览器中加载一个新的文件或 URL
my_webui:LoadURL(url)

Parameters

TypeParameterDefaultDescription
HTML Pathurl Required parameter No description provided
Moderate

OpenDevTools​

打开此 WebUI 的开发者工具，仅在未禁用 Client.SetDebugEnabled() 时有效
my_webui:OpenDevTools()
Optimal

RemoveFocus​

移除此 WebUI 的焦点（并将焦点设回游戏视口）
在你不再需要键盘输入后，必须调用此方法
my_webui:RemoveFocus()
Optimal

SendKeyEvent​

通过编程方式向 WebUI 发送按键事件
my_webui:SendKeyEvent(key_type, key_code, modifiers?)

Parameters

TypeParameterDefaultDescription
WebUIKeyTypekey_type Required parameter No description provided
integerkey_code Required parameter No description provided
WebUIModifiermodifiers?WebUIModifier.None
支持使用 | 分隔多个修饰键（使用按位运算）
Optimal

SendMouseClickEvent​

你必须同时发送按下（Down）和释放（Up）才能使其正常工作
my_webui:SendMouseClickEvent(mouse_x, mouse_y, mouse_type, is_mouse_up, modifiers?, click_count?)

Parameters

TypeParameterDefaultDescription
integermouse_x Required parameter 鼠标的 X 轴位置
integermouse_y Required parameter 鼠标的 Y 轴位置
WebUIMouseTypemouse_type Required parameter 哪一个鼠标按键
booleanis_mouse_up Required parameter 事件是 Up 还是 Down
WebUIModifiermodifiers?WebUIModifier.None
支持使用 | 分隔多个修饰键（使用按位运算）
integerclick_count?1
双击事件请传入 2
Optimal

SendMouseMoveEvent​

通过编程方式向 WebUI 发送鼠标移动事件
my_webui:SendMouseMoveEvent(mouse_x, mouse_y, modifiers?, mouse_leave?)

Parameters

TypeParameterDefaultDescription
integermouse_x Required parameter 鼠标的 X 轴位置
integermouse_y Required parameter 鼠标的 Y 轴位置
WebUIModifiermodifiers?WebUIModifier.None
支持使用 | 分隔多个修饰键（使用按位运算）
booleanmouse_leave?false
No description provided
Optimal

SendMouseWheelEvent​

通过编程方式向 WebUI 发送鼠标滚轮事件
my_webui:SendMouseWheelEvent(mouse_x, mouse_y, delta_x, delta_y)

Parameters

TypeParameterDefaultDescription
integermouse_x Required parameter 鼠标的 X 轴位置
integermouse_y Required parameter 鼠标的 Y 轴位置
floatdelta_x Required parameter No description provided
floatdelta_y Required parameter No description provided
Optimal

SetFocus​

启用此浏览器的焦点（即可以接收键盘输入并会触发输入事件）
注：同一时间只能有一个浏览器获得焦点。
my_webui:SetFocus()
Optimal

SetFreeze​

冻结 WebUI 在表面上的渲染（底层仍会继续执行 JS）
my_webui:SetFreeze(freeze)

Parameters

TypeParameterDefaultDescription
booleanfreeze Required parameter No description provided
Optimal

SetLayout​

将布局设为屏幕上的画布。锚点：

my_webui:SetLayout(screen_location/offset_left_top?, size/offset_right_bottom?, anchors_min?, anchors_max?, alignment?)

Parameters

TypeParameterDefaultDescription
Vector2Dscreen_location/offset_left_top?Vector(0, 0)
No description provided
Vector2Dsize/offset_right_bottom?Vector(0, 0)
No description provided
Vector2Danchors_min?Vector(0, 0)
No description provided
Vector2Danchors_max?Vector(1, 1)
No description provided
Vector2Dalignment?Vector(0.5, 0.5)
No description provided
Optimal

SetVisibility​

设置其在屏幕上的可见性
my_webui:SetVisibility(visibility)

Parameters

TypeParameterDefaultDescription
WidgetVisibilityvisibility Required parameter No description provided

See also GetVisibility.

Optimal

SpawnSound​

生成一个声音实体来播放此 WebUI 的声音
local ret = my_webui:SpawnSound(location?, is_2d?, volume?, inner_radius?, falloff_distance?, attenuation_function?)

Parameters

TypeParameterDefaultDescription
Vectorlocation?Vector(0, 0, 0)
No description provided
booleanis_2d?true
No description provided
floatvolume?1.0
No description provided
integerinner_radius?400
No description provided
integerfalloff_distance?3600
No description provided
AttenuationFunctionattenuation_function?AttenuationFunction.Linear
No description provided

Returns

TypeDescription
SoundNo description provided

🚀 事件​

Inherited Entity Events
WebUI inherits from Base Entity Class, sharing it's events:
Base Entityscripting-reference/classes/base-classes/entity
NameDescription
ClassRegister当使用 继承系统 注册一个新类时触发
Destroy当实体被销毁时触发
Spawn当实体被生成/创建时触发
ValueChange当实体通过 :SetValue() 改变了值时触发
NameDescription
Fail当此页面加载失败时触发
Ready当此页面完全加载完成时触发

Fail​

当此页面加载失败时触发
WebUI.Subscribe("Fail", function(error_code, message)
	-- Fail was called
end)

Arguments

TypeArgumentDescription
integererror_codeNo description provided
stringmessageNo description provided

Ready​

当此页面完全加载完成时触发
WebUI.Subscribe("Ready", function()
	-- Ready was called
end)