Usage Guide: Basic Communication

This guide covers the fundamental communication patterns between Java and JavaScript using JsBridge.

Java Calling JavaScript

To invoke a JavaScript function (handler) from your native Java code, you first need to register the handler in your JavaScript, and then call it from Java.

1. Register a Handler in JavaScript

In your web page's JavaScript, use bridge.registerHandler to define a function that Java can call.

setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("Data from Java: " + data);
        var responseData = "JavaScript says: I got your data!";
        responseCallback(responseData);
    });
});

• data: The data payload sent from Java.
• responseCallback: A function you can call to send a response back to Java.

2. Call the Handler from Java

In your Android Activity, use webView.callHandler to execute the JavaScript handler.

// Using Gson to serialize an object to a JSON string
User user = new User();
user.name = "Android User";

webView.callHandler("functionInJs", new Gson().toJson(user), new OnBridgeCallback() {
    @Override
    public void onCallBack(String data) {
        // This is called when the JavaScript responseCallback is executed
        Log.d(TAG, "Response from JavaScript: " + data);
    }
});

JavaScript Calling Java

This is the reverse process: invoking a Java method from your JavaScript code.

1. Register a Handler in Java

In your Android Activity, use webView.registerHandler to expose a Java method to the WebView.

webView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
    public void handler(String data, OnBridgeCallback function) {
        Log.i(TAG, "Handler 'submitFromWeb' received data: " + data);
        // You can process the data here

        // Send a response back to JavaScript's callback
        function.onCallBack("Response from Java: Success!");
    }
});

• data: The data payload sent from JavaScript.
• function: An OnBridgeCallback instance you can use to send a response back.

2. Call the Handler from JavaScript

In your web page's JavaScript, use bridge.callHandler.

bridge.callHandler(
    'submitFromWeb',
    { 'param': 'Some value from the web' },
    function(responseData) {
        // This callback is executed with the data from Java's onCallBack
        alert("Received response from Java: " + responseData);
    }
);

Default Handlers

For simpler use cases, you can send messages without specifying a handler name. These will be processed by a default handler on the receiving end.

Java Sending to Default JS Handler

// Java side
webView.sendToWeb("Hello from Java!");

// JavaScript side: Use bridge.init to set the default handler
setupWebViewJavascriptBridge(function(bridge) {
    bridge.init(function(message, responseCallback) {
        console.log('Default JS handler got a message:', message);
        responseCallback({ 'JS Responds': 'Got it!' });
    });
});

JavaScript Sending to Default Java Handler

// JavaScript side
bridge.doSend(
    { id: 1, content: 'Some data' },
    function(responseData) {
        console.log("Response from default Java handler: ", responseData);
    }
);

// Java side
webView.setDefaultHandler(new BridgeHandler() {
    @Override
    public void handler(String data, OnBridgeCallback function) {
        Log.d(TAG, "Default handler received: " + data);
        function.onCallBack("Default response from Java");
    }
});