Bidirectional JS bridge for the native WebView component.
Use Mob.UI.webview/1 to embed the component, then call these functions
from handle_info to communicate with the page.
JS side — inject window.mob is injected automatically by the native layer:
// Send a message to Elixir
window.mob.send({ event: "clicked", id: 42 })
// Receive a message from Elixir
window.mob.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
Summary
Functions
Evaluate arbitrary JavaScript in the current WebView and return the result
asynchronously via handle_info({:webview, :eval_result, result}, socket).
Push a message from Elixir into the WebView page. Calls window.mob._dispatch(json)
in JS, which delivers the data to all window.mob.onMessage handlers.
Functions
@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).
@spec post_message(Phoenix.LiveView.Socket.t(), term()) :: Phoenix.LiveView.Socket.t()
Push a message from Elixir into the WebView page. Calls window.mob._dispatch(json)
in JS, which delivers the data to all window.mob.onMessage handlers.