Dala.WebView (dala v0.0.2)

Copy Markdown View Source

Bidirectional JS bridge for the native WebView component.

Overview:

Use Dala.UI.webview/1 to embed the component, then call these functions from handle_info to communicate with the page.

JS Side (injected automatically):

// Send a message to Elixir
window.dala.send({ event: "clicked", id: 42 })

// Receive a message from Elixir
window.dala.onMessage(function(data) { console.log(data) })

Elixir Side:

def handle_info({:webview, :message, %{"event" => "clicked", "id" => id}}, socket) do
  {:noreply, socket}
end

def handle_info({:webview, :blocked, url}, socket) do
  # A navigation attempt was blocked by the allow: whitelist
  {:noreply, socket}
end

Navigation Functions:

Interact Actions:

  • {:tap, selector} - Tap an element
  • {:type, selector, text} - Type text
  • {:clear, selector} - Clear input
  • {:eval, js_code} - Evaluate JavaScript
  • {:scroll, selector, dx, dy} - Scroll element
  • {:wait, selector, timeout_ms} - Wait for element

Results arrive via:

  • {:webview, :eval_result, json} - JS eval result
  • {:webview, :interact_result, %{"action" => ..., "success" => ...}}

Summary

Functions

eval_js(socket, code)

Evaluate arbitrary JavaScript in the current WebView and return the result asynchronously via handle_info({:webview, :eval_result, result}, socket).

go_forward(socket)

Go forward in the WebView history (if possible).

interact(socket, action)

High-level interact API for driving WebView content programmatically.

navigate(socket, url)

Navigate to a new URL in the WebView.

post_message(socket, data)

Push a message from Elixir into the WebView page. Calls window.dala._dispatch(json) in JS, which delivers the data to all window.dala.onMessage handlers.

reload(socket)

Reload the current page.

screenshot(socket)

Take a screenshot of the WebView content.

stop_loading(socket)

Stop loading the current page.

Functions

eval_js(socket, code)

@spec eval_js(Phoenix.LiveView.Socket.t(), String.t()) :: Phoenix.LiveView.Socket.t()

Evaluate arbitrary JavaScript in the current WebView and return the result asynchronously via handle_info({:webview, :eval_result, result}, socket).

The result is JSON-decoded before delivery.

go_forward(socket)

@spec go_forward(Phoenix.LiveView.Socket.t()) :: Phoenix.LiveView.Socket.t()

Go forward in the WebView history (if possible).

interact(socket, action)

@spec interact(Phoenix.LiveView.Socket.t(), tuple()) :: Phoenix.LiveView.Socket.t()

High-level interact API for driving WebView content programmatically.

Actions:

  • {:tap, selector} - Tap an element matching CSS selector
  • {:type, selector, text} - Type text into an input element
  • {:clear, selector} - Clear an input element
  • {:eval, js_code} - Evaluate JS and return result via :eval_result
  • {:scroll, selector, dx, dy} - Scroll an element by delta
  • {:wait, selector, timeout_ms} - Wait for element to appear (via polling)

Results arrive as handle_info({:webview, :interact_result, %{"action" => ..., "success" => ...}}, socket).

post_message(socket, data)

@spec post_message(Phoenix.LiveView.Socket.t(), term()) :: Phoenix.LiveView.Socket.t()

Push a message from Elixir into the WebView page. Calls window.dala._dispatch(json) in JS, which delivers the data to all window.dala.onMessage handlers.

reload(socket)

@spec reload(Phoenix.LiveView.Socket.t()) :: Phoenix.LiveView.Socket.t()

Reload the current page.

screenshot(socket)

@spec screenshot(Phoenix.LiveView.Socket.t()) :: Phoenix.LiveView.Socket.t()

Take a screenshot of the WebView content.

Returns the PNG data as a binary via:

handle_info({:webview, :screenshot, png_data}, socket)

Note: Currently not implemented on all platforms.

stop_loading(socket)

@spec stop_loading(Phoenix.LiveView.Socket.t()) :: Phoenix.LiveView.Socket.t()

Stop loading the current page.