This page was loaded with set_page(html, '').
The HTML is defined as a Ruby heredoc and passed directly to the WebView. No files are needed — everything is self-contained in the Ruby source.
@webview.set_page(html_string, '')
Full CSS is supported. JavaScript works. External resources (images, fonts) require a base URL or data URIs.
| Feature | HtmlWindow | WebView |
|---|---|---|
| Basic HTML | ✓ | ✓ |
| CSS stylesheets | Limited | ✓ Full |
| JavaScript | ✗ | ✓ |
| Syntax highlighting | ✗ | ✓ |
| External libraries (CDN) | ✗ | ✓ |
| Ruby↔JS bridge | ✗ | ✓ |
| Setup complexity | None | Low |
Chart.js was loaded from a CDN — no local file needed.
This page was loaded with
load_url("data:text/html;base64,#{'{'}encoded{'}'}").
The HTML is base64-encoded in Ruby and passed as a data URI. This is the most reliable approach — scripts always execute, and it works identically on macOS, Windows, and Linux.
set_page causes script execution issuesencoded = Base64.strict_encode64(html)
@webview.load_url("data:text/html;base64,\#{encoded}")
HTML
# ── WebView demo frame ─────────────────────────────────────────────────────────
class WebViewDemoFrame < Wx::Frame
def initialize
super(nil, title: 'WebView Demo', size: [900, 600])
@panel = Wx::Panel.new(self)
build_ui
bind_events
layout
centre
end
private
def build_ui
# Tab selector
@tabs = Wx::Notebook.new(@panel)
# ── Tab 1: Inline HTML ────────────────────────────────────────────────
@wv1 = make_webview(@tabs)
@tabs.add_page(make_page(@tabs, @wv1), 'Inline HTML')
# ── Tab 2: CDN library ────────────────────────────────────────────────
@wv2 = make_webview(@tabs)
@tabs.add_page(make_page(@tabs, @wv2), 'CDN Library')
# ── Tab 3: Base64 data URI ────────────────────────────────────────────
@wv3 = make_webview(@tabs)
@tabs.add_page(make_page(@tabs, @wv3), 'Base64 URI')
# ── run_script demo panel ─────────────────────────────────────────────
ctrl_box = Wx::StaticBox.new(@panel, label: 'run_script demo (Tab 1)')
@js_input = Wx::TextCtrl.new(ctrl_box, value: "document.querySelector('h1').style.color = 'red'")
@run_btn = Wx::Button.new(ctrl_box, label: 'Run JS')
ctrl_row = Wx::HBoxSizer.new
ctrl_row.add(@js_input, 1, Wx::EXPAND | Wx::RIGHT, 6)
ctrl_row.add(@run_btn, 0)
ctrl_sz = Wx::StaticBoxSizer.new(ctrl_box, Wx::VERTICAL)
ctrl_sz.add(ctrl_row, 0, Wx::EXPAND | Wx::ALL, 8)
create_status_bar
set_status_text('Select a tab to see each loading approach')
sizer = Wx::VBoxSizer.new
sizer.add(@tabs, 1, Wx::EXPAND | Wx::ALL, 4)
sizer.add(ctrl_sz, 0, Wx::EXPAND | Wx::LEFT | Wx::RIGHT | Wx::BOTTOM, 4)
@panel.set_sizer(sizer)
@panel.layout
end
def make_webview(parent)
Wx::WEB::WebView.new(parent, Wx::ID_ANY, 'about:blank')
end
def make_page(parent, webview)
page = Wx::Panel.new(parent)
sizer = Wx::VBoxSizer.new
webview.reparent(page)
sizer.add(webview, 1, Wx::EXPAND)
page.set_sizer(sizer)
page
end
def bind_events
# ── Load content into each WebView ────────────────────────────────────
# Approach 1: set_page with inline HTML string
@wv1.evt_webview_loaded(@wv1.id) do
next if @wv1.current_url == 'about:blank'
set_status_text('Tab 1 loaded via set_page')
end
@wv1.set_page(INLINE_HTML, '')
# Approach 2: set_page with CDN library — note we wait for loaded
# event before declaring success, since CDN fetch takes a moment
@wv2.evt_webview_loaded(@wv2.id) do
next if @wv2.current_url == 'about:blank'
set_status_text('Tab 2 loaded via set_page + CDN')
end
@wv2.evt_webview_error(@wv2.id) do |event|
set_status_text("Tab 2 error: #{event.string}")
end
@wv2.set_page(CDN_HTML, '')
# Approach 3: load_url with base64 data URI
@wv3.evt_webview_loaded(@wv3.id) do
next if @wv3.current_url == 'about:blank'
set_status_text('Tab 3 loaded via load_url + base64')
end
encoded = Base64.strict_encode64(BASE64_HTML)
@wv3.load_url("data:text/html;base64,#{encoded}")
# ── Notebook tab change ────────────────────────────────────────────────
evt_notebook_page_changed(@tabs.id) do
tab = @tabs.selection
hints = ['set_page(html, \'\')',
'set_page(html_with_cdn, \'\')',
'load_url("data:text/html;base64,...")']
set_status_text("Approach: #{hints[tab]}")
end
# ── run_script demo ───────────────────────────────────────────────────
# run_script executes JavaScript in the WebView and returns the result.
# It operates on whichever WebView is currently visible (Tab 1 here).
evt_button(@run_btn.id) do
js = @js_input.value.strip
next if js.empty?
begin
result = @wv1.run_script(js)
set_status_text("run_script result: #{result.inspect}")
rescue => e
set_status_text("run_script error: #{e.message}")
end
end
evt_close { |event| on_close(event) }
end
def on_close(event)
event.skip
end
end
Wx::App.run { WebViewDemoFrame.new.show }