CT WEBBROWSER

Introduction

⚠

This is a experimental feature currently available for testing on Development-Branch. It is not yet decided whether this will become available in Stable branch. Please provide Feedback on the Arma Discord's #dev_rc_branch channel.

WebBrowser control features an embedded Chromium window.
The URL is subject to allowedHTMLLoadURIs[] whitelisting in CfgCommands config.
ctrlSetURL Can be used to change the URL after creation of the control.

Related commands & functions

• Commands: General
• Commands: UI Eventhandlers

Related User Interface Eventhandlers

• Events: General

Alphabetical Order

ⓘ

TokenNames common to most controls, such as x, y, w, h, text, idc... can be found here.

⚠

Not all of the listed attributes might have an effect nor might the list be complete. All attributes were gathered with this config crawler.

#define CT_WEBBROWSER 106

A

allowExternalURL

Type

Boolean

Description

Whether this browser will allow external URLs, as opposed to local content.

allowExternalURL = 1;

U

url

Type

String

Description

if allowExternalURL==1 then URL to be opened else path to a local file to load. Local files are subject to allowedHTMLloadExtensions (#TODO link)

url = "https://arma3.com";

Scripting

ctrlWebBrowserAction

-wrong parameter ("arma3dev") defined!-[[:Category:Introduced with arma3dev version 2.20|2.20]]

Hover & click on the images for description

Description

Description:

Executes an action on a WebBrowser control. The type of parameters depends on the action type. Possible Actions are:

Action	Parameter	Result	Description
OpenDevConsole	None	Nothing	Opens a Chrome Developer console for this browser, in a external window. (Only available if -debug start parameter is set)
ExecJS	String	Nothing	Executes Javascript code inside the currently loaded page.
JSDialogResponse	Boolean	Nothing	Respond to a Javascript alert() or confirm(), after triggered by "JSDialog" Eventhandler
OpenDataAsURL	String	Nothing	Displays provided data in browser. This can be used to load HTML from a file and display it in the Browser window.
LoadFile	String	Nothing	Loads file into browser (Equivalent to ["OpenDataAsURL", loadFile "filePathHere"]) _ctrl ctrlWebBrowserAction ["LoadFile", "z\mod\file.html"] is equivalent to _ctrl ctrlSetURL "file://z/mod/file.html"
ToBase64	String	String	Encodes the input string into Base64 (This also works with controlNull)

Groups:

GUI Control

Syntax

Syntax:

control ctrlWebBrowserAction [Action, ...]

Parameters:

control: Control

Action: String

Return Value:

Nothing

Examples

Example 1:

_control ctrlWebBrowserAction ["OpenDataAsURL", loadFile "example.html"];

Additional Information

See also:

ctrlURL menuSetURL

Notes

Report bugs on the Feedback Tracker and/or discuss them on the Arma Discord or on the Forums.
Only post proven facts here! Add Note

[[Category:Introduced with arma3dev version 2.20]][[ Category: arma3dev: New Scripting Commands | CT WEBBROWSER]][[ Category: arma3dev: Scripting Commands | CT WEBBROWSER]]

Control EventHandler

This eventhandler can only be added to WebBrowser controls

JSDialog

• Use on: Control (CT_WEBBROWSER)
• Fired on: Fires when Javascript triggers a alert() or confirm() dialog.
• Returns: Display or control, for controls it also returns the control's config (since 1.56).

params ["_control", "_isConfirmDialog", "_message"];

The code handling this event can return a Boolean true/false. Which will stop the next Eventhandlers from being triggered, and will be interpreted as a reply to the dialog.
If the code does not immediately provide a reply, it should return Nothing.
If the code does not return bool, then the script must call ctrlWebBrowserAction with the "JSDialog" action to reply to the dialog, the WebBrowser will be unresponsive until a reply has been sent.

Default Classes

AddOns: Classes need to be initialised first with class SomeClass;

---

Missions: Since Arma 3 v2.02 one can use import SomeClass; to initialise a class (see the import keyword).

In older versions, use "Default" call BIS_fnc_exportGUIBaseClasses; and paste the result into the description.ext.

RscWebBrowser

Baseline RscWebBrowser example

class RscWebBrowser
{
	type = CT_WEBBROWSER; // 106
	idc = -1;
	deletable = 0;
	style = 0;
	x = 0;
	y = 0;
	w = 0.3;
	h = 0.3;
	allowExternalURL = 1;
	url = "https://arma3.com";
};

Browser Content

The Browser is separated into two modes. - Remote Content (Loading external websites by a URL) which can be enabled with the allowExternalContent attribute. - Local Content (Loading local html files from within a pbo/mission).

Remote Content

Remote content is considered unsafe. Any browser that uses "allowExternalURL" will prompt the player to allow it being opened. URL's are limited by the allowedHTMLLoadURIs server/mod configuration (#TODO link to it)

Local Content

Loading Local Content, forces the browser into a "sandbox" mode.
Players will not receive a permission popup for Local Content.
Local Content offers a Javascript API to interact with the game without having to go through SQF.
Local files are subject to allowedHTMLloadExtensions (#TODO link).

Sandbox

The content is loaded into a sandboxed iframe with a Content Security Policy.

Any external communication via fetch or XMLHttpRequest is unavailable.
Access to Local Storage, IndexedDB are unvailable.
alert() and confirm() are not directly accessible, but the Javascript API provides a wrapper.

Content like Images, Styles, Font's, Scripts, Media, can only be specified inline (for Scripts and Styles) or via Data URLs.

Javascript API

This API is injected into every local content page automatically.

API offers the following functions (Here expressed as typescript to clarify argument and return types)

class A3API
{
  /**
   * Loads file from game filesystem.
   *
   * @param filePath - Path in game filesystem, without leading backslash
   * @param maxSize - maximum texture width (used to select Mip)
   * @returns The image as a data-url
   */
  static RequestTexture(texturePath: string, maxSize: number): Promise<string>;

  /**
   * Loads file from game filesystem.
   *
   * @param filePath - same as loadFile SQF command
   * @returns The file content
   */
  static RequestFile(filePath: string): Promise<string>;

  /**
   * Loads and preprocesses file from game filesystem.
   *
   * @param filePath - same as preprocessFile SQF command
   * @returns The file content
   */
  static RequestPreprocessedFile(filePath: string): Promise<string>;

  // Triggers a alert() (Needs to be piped due to https://chromestatus.com/feature/5148698084376576)
  static SendAlert(content: string): void;

  static SendConfirm(content: string): Promise<string>;
}

Example, this is how to load a image out of the game, into Javascript, and insert it into the page

const eWeaponImage = document.createElement('img');
A3API.RequestTexture("A3\\weapons_F\\Rifles\\MX\\data\\UI\\gear_mx_rifle_X_CA.paa", 512).then(imageContent => eWeaponImage.src = imageContent);
document.body.appendChild(eWeaponImage);

Example HUD

Here is an example of how to create a basic WebBrowser based HUD overlay purely inside a mission file.

Create a basic mission, and place the following files next to the mission.sqm

description.ext:

import RscText;
class RscTitles
{
	class HudOverlayUI
	{
		idd = 13371337;
		fadein = 0; // Required parameters for RscTitles
		fadeout = 0;
		duration = 1e+011;

		onLoad = "GHUDOverlay = _this"; // Store our Display in a variable so we can access it from script

		class controls
		{
			class Texture: RscText
			{
				type = 106; // CT_WEBBROWSER
				idc = 1337;
				x = safeZoneX; // Full screen from corner to corner
				y = safeZoneY;
				w = safeZoneW;
				h = safeZoneH;
				url = "file://hudOverlay.html"; // Reference to a file inside our mission
			};
		};
	};
};

init.sqf

("MyHudLayer" call BIS_fnc_rscLayer) cutRsc ["HudOverlayUI", "PLAIN"]; // Add our Display to the HUD private _ctrl = ((GHUDOverlay#0) displayCtrl 1337); _ctrl ctrlAddEventHandler ["JSDialog", { params ["_control", "_isConfirmDialog", "_message"]; // Insert message as text into the page, by assembling Javascript code to insert a new element and set its text. _control ctrlWebBrowserAction ["ExecJS", format ["const eSpan = document.createElement('span'); eSpan.textContent = 'Script says %1!'; document.body.appendChild(eSpan);", _message]]; true; // We need to tell it that we handled the "dialog", by returning true or false. }]; //_ctrl ctrlWebBrowserAction ["OpenDevConsole"]; // Can open developer console here //_ctrl ctrlWebBrowserAction ["LoadFile", "hudOverlay.html"]; // Instead of using url= in description.ext, we could also load the file here, that way we can open dev console before the page is loaded

hudOverlay.html

<!DOCTYPE html>
<html lang="en">
<body>


<script>
// Load the MX Rifle inventory image and add it to the page
const eWeaponImage = document.createElement('img');
A3API.RequestTexture("A3\\weapons_F\\Rifles\\MX\\data\\UI\\gear_mx_rifle_X_CA.paa", 512).then(imageContent => eWeaponImage.src = imageContent);
document.body.appendChild(eWeaponImage);

// Send a message to script
A3API.SendAlert("Javascript is sending an alert"); // This alert will trigger a JSDialog (Alert Dialog) eventhandler

</script>
</body>
</html>