版本：bleeding-edge 🩸

🖥️ WebUI

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

💂Authority

This class can only be spawned on 🟧 Client side.

👪Inheritance

This class shares methods and events from Base Entity.

🧑‍💻API Source

This page is auto-generated! The Functions, Properties and Events described here are defined in our GitHub's API Repository! Feel free to commit suggestions and changes to the source .json API files!

提示

Our WebUI implementation is built using the last versions of Chromium Embedded Framework.

提示

To access the in-browser remote debugging head over to http://localhost:9222 when you are connected to a server.

专有编解码器

Proprietary Codecs like MPEG-4 (.mp4), H.264, H.265 and AAC are not supported on public CEF builds. We recommend converting your media files to WEBM or OGG.

🎒 示例

Client/Index.lua
-- Loading a local file
local my_ui = WebUI(
    "Awesome UI",            -- Name
    "file://UI/index.html",  -- Path relative to this package (Client/)
    WidgetVisibility.Visible  -- Is Visible on Screen
)

-- Loading a Web URL
local my_browser = WebUI(
    "Awesome Site",          -- Name
    "https://nanos-world.com",   -- Web's URL
    WidgetVisibility.Visible  -- Is Visible on Screen
)

-- Loading a local file from other package
local my_ui = WebUI(
    "Awesome Other UI",      -- Name
    "file://other-package/Client/UI/index.html",
    WidgetVisibility.Visible  -- Is Visible on Screen
)

Using a WebUI as Mesh Material

Client/Index.lua
-- Spawns a WebUI with is_visible = false, is_transparent = false, auto_resize = false and size of 500x500
local my_ui = WebUI("Awesome Site", "https://nanos-world.com", false, false, false, 500, 500)

-- Spawns a StaticMesh (can be any mesh)
local static_mesh = StaticMesh(Vector(0, 0, 100), Rotator(), "nanos-world::SM_Cube")

-- Sets the mesh material to use the WebUI
static_mesh:SetMaterialFromWebUI(my_ui)

Communicating between Lua and JS (WebUI)

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

local param1 = 123
local param2 = "hello"

-- Calls a JS event
my_ui:CallEvent("MyEvent", param1, param2)

-- Subscribes to receive JS events
my_ui:Subscribe("MyAnswer", function(param1)
    Console.Log("Received back! %s", param1)
    -- Will output 'Received back! Hey there!'
end)

script.js
// Register for "MyEvent" from Lua
Events.Subscribe("MyEvent", function(param1, param2) {
    console.log("Triggered! " + param1 + " " + param2);
    // Will output 'Triggered! 123 hello'

    // Triggers "MyAnswer" on Lua
    Events.Call("MyAnswer", "Hey there!");
});

// It is also possible to unsubscribe from an event to make it stop triggering
Events.Unsubscribe("MyEvent");

Pretty Scroll Bar

Since we migrated from Webkit to CEF, some scrollbars got ugly. Here's a small CSS snippet to make them almost like the Webkit ones:

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

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

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

提示

You can use the output Texture from a Canvas with :SetMaterialFromWebUI() method!

📚 Libraries & Frameworks

Here a list of Community Created Libraries & Frameworks making use of WebUIs expanding it's possibilities:

🛠 构造函数

Default Constructor

No description provided

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

Parameters

Type	Name	Default	Description
string	`name`	Required parameter	用于调试日志
HTML Path	`path`	Required parameter	网页 URL 或 HTML 文件路径，例如 `file://my_file.html`
WidgetVisibility	`visibility`	`WidgetVisibility.Visible`	WebUI 在屏幕上是否可见
boolean	`is_transparent`	`true`	WebUI 背景是否透明
boolean	`auto_resize`	`true`	if should auto resize when screen changes its size (useful OFF when you are painting meshes with WebUI)
integer	`width`	`0`	不使用 auto_resize 时 WebUI 的宽度大小
integer	`height`	`0`	不使用 auto_resize 时 WebUI 的高度大小

🔍 HTML Path Searchers

Loading a .html file supports the following searchers, which are looked in the following order:

Relative to current-file-path/
Relative to current-package/Client/
Relative to current-package/
Relative to Packages/

🗿 静态函数

Inherited Entity Static Functions

WebUI inherits from Base Entity Class, sharing it's methods and functions:
Base Entityscripting-reference/classes/base-classes/entity

Returns	Name	Description
table of Base Entity	`GetAll`	返回一个包含调用此方法的类中所有实体的表
Base Entity	`GetByIndex`	返回该类中指定索引处的特定实体
integer	`GetCount`	返回该类当前存在的实体数量
table of table	`GetInheritedClasses`	获取使用继承系统创建的、直接继承自该类的所有子类列表
iterator	`GetPairs`	返回一个包含该类所有实体的迭代器，用于 `pairs()` 循环
table or nil	`GetParentClass`	如果该类是使用继承系统创建的，则获取其父类
table	`Inherit`	使用继承系统继承此类
boolean	`IsChildOf`	如果该类是使用继承系统创建的，检查此类是否为另一个类的子类
function	`Subscribe`	为该类的所有实体订阅一个事件
function	`SubscribeRemote`	订阅从服务器调用的自定义远程事件
	`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

Returns	Name	Description
	`BroadcastRemoteEvent`	直接在此实体上向所有玩家调用自定义远程事件
	`BroadcastRemoteInRadiusEvent`	直接针对此实体调用自定义远程事件，并将该事件传递给半径范围内的所有玩家
	`CallRemoteEvent`	直接在此实体上向特定玩家调用自定义远程事件
	`CallRemoteEvent`	直接在此实体上调用自定义远程事件
	`CallRemotePlayersEvent`	直接在此实体上调用自定义远程事件，并将事件传递给玩家列表
	`Destroy`	销毁该实体
	`FinishSpawn`	完成生成过程，如果实体是通过 `defer_spawn` 生成的，则将实体发送给客户端
table of string	`GetAllValuesKeys`	获取所有值键的列表
table	`GetClass`	获取该实体的类
integer	`GetID`	获取该实体的全网通用网络 ID（在客户端和服务器上相同）
any	`GetValue`	获取此实体上存储在给定键处的值
boolean	`HasAuthority`	Gets if the local context has authority over this Entity (true if spawned by the client, false if spawned by the server)
boolean	`IsA`	递归检查此实体是否继承自某个类
boolean	`IsBeingDestroyed`	如果该实体正在被销毁，则返回 true
boolean	`IsValid`	如果该实体有效（即未被销毁且指向一个有效的实体），则返回 true
	`SetValue`	在此实体中设置一个值
function	`Subscribe`	在这个特定实体上订阅一个事件
function	`SubscribeRemote`	在这个特定实体上订阅一个从服务器调用的自定义远程事件
	`Unsubscribe`	退订此包内该实体中此事件的所有回调，或者仅取消传入的特定回调

Returns	Name	Description
	`BringToFront`	将此 WebUI 置于所有 WebUI 和控件的最前端
	`CallEvent`	在浏览器的 JavaScript 中调用一个事件
	`CloseDevTools`	关闭此 WebUI 的开发者工具，仅在未禁用 Client.SetDebugEnabled() 时有效
	`ExecuteJavaScript`	在浏览器中执行一段 JavaScript 代码
string	`GetName`	获取此 WebUI 的名称
Vector2D	`GetSize`	获取此 WebUI 的当前尺寸
WidgetVisibility	`GetVisibility`	返回当前 WebUI 的可见性
	`HasNodeFocus`	返回此 WebUI 是否有任何 DOM 节点处于聚焦状态
boolean	`IsFrozen`	返回此 WebUI 当前是否处于冻结状态
boolean	`IsReady`	返回此 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`	设置其在屏幕上的可见性
Sound	`SpawnSound`	生成一个声音实体来播放此 WebUI 的声音

`BringToFront`

将此 WebUI 置于所有 WebUI 和控件的最前端

my_webui:BringToFront()

`CallEvent`

在浏览器的 JavaScript 中调用一个事件

my_webui:CallEvent(event_name, args...)

Parameters

Type	Parameter	Default	Description
string	`event_name`	Required parameter	用于触发事件的事件名称
any	`args...`	Required parameter	传递给事件的参数

`CloseDevTools`

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

my_webui:CloseDevTools()

`ExecuteJavaScript`

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

my_webui:ExecuteJavaScript(javascript_code)

Parameters

Type	Parameter	Default	Description
string	`javascript_code`	Required parameter	No description provided

`GetName`

获取此 WebUI 的名称

local name = my_webui:GetName()

Returns

Type	Description
string	name

`GetSize`

获取此 WebUI 的当前尺寸

local ret = my_webui:GetSize()

Returns

Type	Description
Vector2D	No description provided

`GetVisibility`

返回当前 WebUI 的可见性

local visibility = my_webui:GetVisibility()

Returns

Type	Description
WidgetVisibility	visibility

`HasNodeFocus`

返回此 WebUI 是否有任何 DOM 节点处于聚焦状态

my_webui:HasNodeFocus()

`IsFrozen`

返回此 WebUI 当前是否处于冻结状态

local freeze = my_webui:IsFrozen()

Returns

Type	Description
boolean	freeze

`IsReady`

返回此 WebUI 是否已准备就绪

local ready = my_webui:IsReady()

Returns

Type	Description
boolean	ready

`LoadHTML`

在此浏览器中加载纯 HTML 内容

my_webui:LoadHTML(html)

Parameters

Type	Parameter	Default	Description
string	`html`	Required parameter	No description provided

`LoadURL`

在此浏览器中加载一个新的文件或 URL

my_webui:LoadURL(url)

Parameters

Type	Parameter	Default	Description
HTML Path	`url`	Required parameter	No description provided

`OpenDevTools`

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

my_webui:OpenDevTools()

`RemoveFocus`

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

my_webui:RemoveFocus()

`SendKeyEvent`

通过编程方式向 WebUI 发送按键事件

my_webui:SendKeyEvent(key_type, key_code, modifiers?)

Parameters

Type	Parameter	Default	Description
WebUIKeyType	`key_type`	Required parameter	No description provided
integer	`key_code`	Required parameter	No description provided
WebUIModifier	`modifiers?`	`WebUIModifier.None`	支持使用 `\|` 分隔多个修饰键（使用按位运算）

`SendMouseClickEvent`

你必须同时发送 Down 和 Up 才能使其正常工作

my_webui:SendMouseClickEvent(mouse_x, mouse_y, mouse_type, is_mouse_up, modifiers?, click_count?)

Parameters

Type	Parameter	Default	Description
integer	`mouse_x`	Required parameter	鼠标的 X 轴位置
integer	`mouse_y`	Required parameter	鼠标的 Y 轴位置
WebUIMouseType	`mouse_type`	Required parameter	哪一个鼠标按键
boolean	`is_mouse_up`	Required parameter	事件是 Up 还是 Down
WebUIModifier	`modifiers?`	`WebUIModifier.None`	支持使用 `\|` 分隔多个修饰键（使用按位运算）
integer	`click_count?`	`1`	双击事件请传入 2

`SendMouseMoveEvent`

通过编程方式向 WebUI 发送鼠标移动事件

my_webui:SendMouseMoveEvent(mouse_x, mouse_y, modifiers?, mouse_leave?)

Parameters

Type	Parameter	Default	Description
integer	`mouse_x`	Required parameter	鼠标的 X 轴位置
integer	`mouse_y`	Required parameter	鼠标的 Y 轴位置
WebUIModifier	`modifiers?`	`WebUIModifier.None`	支持使用 `\|` 分隔多个修饰键（使用按位运算）
boolean	`mouse_leave?`	`false`	No description provided

`SendMouseWheelEvent`

通过编程方式向 WebUI 发送鼠标滚轮事件

my_webui:SendMouseWheelEvent(mouse_x, mouse_y, delta_x, delta_y)

Parameters

Type	Parameter	Default	Description
integer	`mouse_x`	Required parameter	鼠标的 X 轴位置
integer	`mouse_y`	Required parameter	鼠标的 Y 轴位置
float	`delta_x`	Required parameter	No description provided
float	`delta_y`	Required parameter	No description provided

`SetFocus`

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

my_webui:SetFocus()

`SetFreeze`

冻结 WebUI 在表面上的渲染（底层仍会继续执行 JS）

my_webui:SetFreeze(freeze)

Parameters

Type	Parameter	Default	Description
boolean	`freeze`	Required parameter	No description provided

`SetLayout`

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

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

Parameters

Type	Parameter	Default	Description
Vector2D	`screen_location/offset_left_top?`	`Vector(0, 0)`	No description provided
Vector2D	`size/offset_right_bottom?`	`Vector(0, 0)`	No description provided
Vector2D	`anchors_min?`	`Vector(0, 0)`	No description provided
Vector2D	`anchors_max?`	`Vector(1, 1)`	No description provided
Vector2D	`alignment?`	`Vector(0.5, 0.5)`	No description provided

`SetVisibility`

设置其在屏幕上的可见性

my_webui:SetVisibility(visibility)

Parameters

Type	Parameter	Default	Description
WidgetVisibility	`visibility`	Required parameter	No description provided

`SpawnSound`

生成一个声音实体来播放此 WebUI 的声音

local ret = my_webui:SpawnSound(location?, is_2d?, volume?, inner_radius?, falloff_distance?, attenuation_function?)

Parameters

Type	Parameter	Default	Description
Vector	`location?`	`Vector(0, 0, 0)`	No description provided
boolean	`is_2d?`	`true`	No description provided
float	`volume?`	`1.0`	No description provided
integer	`inner_radius?`	`400`	No description provided
integer	`falloff_distance?`	`3600`	No description provided
AttenuationFunction	`attenuation_function?`	`AttenuationFunction.Linear`	No description provided

Returns

Type	Description
Sound	No description provided

🚀 事件

Inherited Entity Events

WebUI inherits from Base Entity Class, sharing it's events:
Base Entityscripting-reference/classes/base-classes/entity

	Name	Description
	`ClassRegister`	当使用继承系统注册一个新类时触发
	`Destroy`	当实体被销毁时触发
	`Spawn`	当实体被生成/创建时触发
	`ValueChange`	当实体通过 `:SetValue()` 改变了值时触发

	Name	Description
	`Fail`	当此页面加载失败时触发
	`Ready`	当此页面完全加载完成时触发

`Fail`

当此页面加载失败时触发

WebUI.Subscribe("Fail", function(error_code, message)
	-- Fail was called
end)

Arguments

Type	Argument	Description
integer	`error_code`	No description provided
string	`message`	No description provided

`Ready`

当此页面完全加载完成时触发

WebUI.Subscribe("Ready", function()
	-- Ready was called
end)

🎒 示例​

Using a WebUI as Mesh Material​

Communicating between Lua and JS (WebUI)​

Pretty Scroll Bar​

📚 Libraries & Frameworks​

EGUI

WebUI3d2d

UI Framework

🛠 构造函数​

Default Constructor​

Parameters

🔍 HTML Path Searchers​

🗿 静态函数​

🦠 函数​

BringToFront​

CallEvent​

Parameters

CloseDevTools​

ExecuteJavaScript​

Parameters

GetName​

Returns

GetSize​

Returns

GetVisibility​

Returns

HasNodeFocus​

IsFrozen​

Returns

IsReady​

Returns

LoadHTML​

Parameters

LoadURL​

Parameters

OpenDevTools​

RemoveFocus​

SendKeyEvent​

Parameters

SendMouseClickEvent​

Parameters

SendMouseMoveEvent​

Parameters

SendMouseWheelEvent​

Parameters

SetFocus​

SetFreeze​

Parameters

SetLayout​

Parameters

SetVisibility​

Parameters

SpawnSound​

Parameters

Returns

🚀 事件​

Fail​

Arguments

Ready​

🎒 示例

Using a WebUI as Mesh Material

Communicating between Lua and JS (WebUI)

Pretty Scroll Bar

📚 Libraries & Frameworks

🛠 构造函数

Default Constructor

🔍 HTML Path Searchers

🗿 静态函数

🦠 函数

`BringToFront`

`CallEvent`

`CloseDevTools`

`ExecuteJavaScript`

`GetName`

`GetSize`

`GetVisibility`

`HasNodeFocus`

`IsFrozen`

`IsReady`

`LoadHTML`

`LoadURL`

`OpenDevTools`

`RemoveFocus`

`SendKeyEvent`

`SendMouseClickEvent`

`SendMouseMoveEvent`

`SendMouseWheelEvent`

`SetFocus`

`SetFreeze`

`SetLayout`

`SetVisibility`

`SpawnSound`

🚀 事件

`Fail`

`Ready`