Quick Start Guide

This guide will walk you through a minimal "Hello World" setup to demonstrate JavaScript calling a Java handler and receiving a response.

1. Add BridgeWebView to your Layout

Replace the standard WebView in your XML layout file with com.github.lzyzsd.jsbridge.BridgeWebView.

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

2. Set up the WebView in your Activity

In your Activity, get a reference to the BridgeWebView, load your local HTML file, and register a handler that JavaScript can call.

MainActivity.java 

package com.github.lzyzsd.jsbridge.example;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.OnBridgeCallback;

public class MainActivity extends Activity {

    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BridgeWebView webView = (BridgeWebView) findViewById(R.id.webView);

        // Load the local HTML file from the assets folder
        webView.loadUrl("file:///android_asset/demo.html");

        // Register a handler for JavaScript to call
        webView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, OnBridgeCallback function) {
                Log.i(TAG, "Handler 'submitFromWeb' received data from web: " + data);
                // Send a response back to JavaScript
                function.onCallBack("Response from Java: Handled your data!");
            }
        });
    }
}

3. Create the HTML and JavaScript

Create a file named demo.html in your src/main/assets directory. This file will contain the button and the JavaScript code to call the native Java handler.

assets/demo.html 

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>JS to Java Demo</title>
</head>
<body>
    <h1>JsBridge Quick Start</h1>
    <p>Response from Java will appear here: <b id="show"></b></p>
    <p><input type="button" value="Call Java Handler" onclick="callJava();" /></p>

<script>
    // This helper function ensures the bridge is ready before you use it.
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    function callJava() {
        setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler(
                'submitFromWeb', // The handler name you registered in Java
                { 'message': 'Hello from JavaScript!' }, // Data to send to Java
                function(responseData) { // Callback to handle the response from Java
                    document.getElementById("show").innerHTML = responseData;
                }
            );
        });
    }
</script>
</body>
</html>

4. Run the App

Build and run your application. When you tap the "Call Java Handler" button, the JavaScript will send a message to your Java submitFromWeb handler. You will see the log message in Logcat, and the response from Java will appear on the web page.