JavaScriptBridge

ui/web.JavaScriptBridge

Bidirectional messaging between native code and the WebView JavaScript context. Extends EventEmitter.

Inheritance

• EventEmitter

  ↳ JavaScriptBridge

You may use on, once, off, removeListener, etc., like any EventEmitter.

Table of contents

Methods

• eval
• handle
• invoke
• on
• send

Methods

eval

▸ eval(code): Promise<any>

Evaluate code inside the page’s JS world and return the result asynchronously.

Example

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
  const rootView = inflateXml(
    context,
    `
        <WebView id="webview" />
    `,
  );
  const webView = rootView.findView("webview");

  const result = await webView.jsBridge.eval("document.title");
  console.log("document.title:", result);
}
main();

Parameters

Name	Type	Description
code	string	JavaScript expression.

Returns

Promise<any>

---

handle

▸ handle(action, handler): JavaScriptBridge

Register a native handler for JS → native invoke calls. When the page calls invoke, the matching action runs.

Example

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
  const rootView = inflateXml(
    context,
    `
        <WebView id="webview" />
    `,
  );
  const webView = rootView.findView("webview");

  webView.jsBridge.handle("getData", async (event, ...args) => {
    console.log("invoke:", event.channel, args);
    return { success: true, data: "Hello from native" };
  });

  webView.loadUrl("file:///android_asset/index.html");
}
main();

Parameters

Name	Type	Description
action	string | null | undefined	Channel name to match, or null / undefined to install a fallback for unmatched invokes.
handler	InvokeRequestHandler	Callback receiving InvokeEvent plus args; may return a value or Promise.

Returns

JavaScriptBridge

this for chaining.

---

invoke

▸ invoke(channel, ...args): Promise<any>

Call into page JavaScript from native and await its reply.

Example

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
  const rootView = inflateXml(
    context,
    `
        <WebView id="webview" />
    `,
  );
  const webView = rootView.findView("webview");

  await webView.loadUrl("file:///android_asset/index.html");

  const result = await webView.jsBridge.invoke("myFunction", "arg1", "arg2");
  console.log("invoke result:", result);
}
main();

Parameters

Name	Type	Description
channel	string	JS-side channel / fn.
...args	any	Arguments to forward.

Returns

Promise<any>

---

on

▸ on(event, listener): JavaScriptBridge

Subscribe to events raised from the page via send.

Example

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
  const rootView = inflateXml(
    context,
    `
        <WebView id="webview" />
    `,
  );
  const webView = rootView.findView("webview");

  webView.jsBridge.on("message", (event, ...args) => {
    console.log("event:", event.name, args);
  });

  webView.loadUrl("file:///android_asset/index.html");
}
main();

Parameters

Name	Type	Description
event	string	Event name from JS.
listener	(event: IPCEvent, ...args: any) => void	First arg is the envelope; rest are payloads.

Returns

JavaScriptBridge

this for chaining.

---

send

▸ send(event, ...args): void

Fire an event into the WebView without waiting for a response.

Example

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
  const rootView = inflateXml(
    context,
    `
        <WebView id="webview" />
    `,
  );
  const webView = rootView.findView("webview");

  await webView.loadUrl("file:///android_asset/index.html");

  webView.jsBridge.send("updateData", { key: "value" });
}
main();

Parameters

Name	Type	Description
event	string	Event name.
...args	any	Payload values.

Returns

void