Garry's Mod Wiki

Home / DHTML

DHTML

Description

The DHTML control wraps the internal Awesomium framework, supports calling Javascript functions from Lua, as well as running Lua from within the HTML. Running Lua code is disabled by default.

View source

Parent

Derives methods, etc not listed on this page from Awesomium.

Events

DHTML:OnBeginLoadingDocument( string url )
Called when this panel begins loading a page.
boolean DHTML:OnCallback( string library, string name, table arguments )
Called by the engine when a callback function is called.
DHTML:OnChangeTargetURL( string url )
Called by HTML panels when the target URL of the frame has changed, this happens when you hover over a link.
DHTML:OnChangeTitle( string newTitle )
Called by HTML panels when the title of the loaded page has been changed.
DHTML:OnChildViewCreated( string sourceURL, string targetURL, boolean isPopup )
Called by HTML panels when the page attempts to open a new child view (such as a popup or new tab).
DHTML:OnDocumentReady( string url )
Called by HTML panels when the panel's DOM has been set up. You can run JavaScript in here.
DHTML:OnFinishLoadingDocument( string url )
Called when this panel successfully loads a page.

Methods

DHTML:AddFunction( string library, string name, function callback )
Defines a Javascript function that when called will call a Lua callback. Must be called after the HTML document has fully loaded.
DHTML:Call( string js )
Runs/Executes a string as JavaScript code in a panel. This function does NOT evaluate expression (i. e. allow you to pass variables from JavaScript (JS) to Lua context). Because a return value is nil/no value (a. k. a. void). If you wish to pass/return values from JS to Lua, you may want to use DHTML:AddFunction function to accomplish that job. This function is an alias of DHTML:QueueJavascript (source).
DHTML:ConsoleMessage( string msg )
Called when the page inside the DHTML window runs the console. log javascript function. On the x86-64 beta, it's called for all built-in console. * javascript functions. If DHTML:SetAllowLua is set to true and the message begins with RUNLUA:, the text following RUNLUA: will be executed as code within the Lua environment (this is how Lua is called from DHTML windows).
boolean DHTML:GetAllowLua()
Returns if the loaded page can run Lua code, set by DHTML:SetAllowLua
boolean DHTML:GetScrollbars()
We advise against using this. It may be changed or removed in a future update. Broken. Use the CSS overflow rule instead. Returns the value set by DHTML:SetScrollbars.
DHTML:QueueJavascript( string js )
Runs/Executes a string as JavaScript code in a panel. This function does NOT evaluate expression (i. e. allow you to pass variables from JavaScript (JS) to Lua context). Because a return value is nil/no value (a. k. a. void). If you wish to pass/return values from JS to Lua, you may want to use DHTML:AddFunction function to accomplish that job. If Panel:IsVisible is false, PANEL:Think will NOT run, meaning the Javascript Queue will not be processed. Consider overriding PANEL:Paint to stop the panel from drawing instead.
DHTML:SetAllowLua( boolean allow = false )
Determines whether the loaded page can run Lua code or not. See DHTML for how to run Lua from a DHTML window.
DHTML:SetScrollbars( boolean show )
We advise against using this. It may be changed or removed in a future update. Broken. Use the CSS overflow rule instead. Sets if the loaded window should display scrollbars when the webpage is larger than the viewing window. This is similar to the CSS overflow rule.
Awesomium doesn’t work with most HTTPS websites because it only supports up to TLS 1.0.

This and other rendering issues can be rectified by using the x86-64 branch.

Using url/href/src

You might have noticed that Relative File Paths like <img src="/images/picture.jpg"> wont work. There are 3 solutions for that:

asset://

Instead of https:// we use asset:// which will point to our local files.

<img src="asset://garrysmod/materials/example_addon/example.png">
Please don't point towards your Addons folder. Use the File Location where Gmod has your addon files included.

Online

Classic Absolute File Paths still work ... well unless you are offline or the website is down or the website uses HTTPS above TLS 1.0 Version.

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

Base64 encoding

This will encode your local File into a Base64 String. The String will start with the datatype like data:image/jpeg;base64, followed by a long chain of characters being the Base64 data.

-- In HTML <img src="data:image/jpeg;base64,LzlqLzRBQ...<!-- base64 data -->"> -- In CSS url("data:image/jpeg;base64,LzlqLzRBQ...<!-- base64 data -->")

Websites like https://www.base64-image.de/ can encode the file for you.

Examples

Example

Creates a DHTML.

local frame = vgui.Create("DFrame") frame:SetSize(300, 200) frame:SetTitle("My new Derma frame") frame:SetVisible(true) frame:SetDraggable(true) frame:MakePopup() frame:Center() --Fill the form with a html page local html = vgui.Create("DHTML", frame) html:Dock(FILL) html:SetHTML([[ <input type='submit' onclick='console.log("RUNLUA:print(\"This is called in Lua context\")")' /> ]]) -- Enable the webpage to call lua code. html:SetAllowLua(true)

Example

Creates a DHTML and opens Google inside.

local frame = vgui.Create("DFrame") frame:SetSize(ScrW() * 0.5, ScrH() * 0.5) frame:SetTitle("HTML Example!") frame:Center() frame:MakePopup() local html = vgui.Create("DHTML", frame) html:Dock(FILL) html:OpenURL("https://www.google.com/")
Output:

Account Management

Special Pages

Wiki List