Android WebView and JavaScript interactive "classic" __java

Android WebView interacting with JavaScriptNovember, 2015 Https://mthli.github.io/Android-WebView-JavaScript

Recently in doing some and webview related work, the period involved with JavaScript interactive operation, web search a lot of blog, feeling write is not very good, spent more time to see understand. Here to summarize, I hope to help you. Operating conditions

Because our goal is to interact with JavaScript, so Webview.getsettings (). Setjavascriptenabled (True); Of course it's necessary. invoking JavaScript methods via WebView

If you simply want to invoke JavaScript, you can use Webview.loadurl ("Javascript:method") directly, and method is the JavaScript method you expect, equivalent to simply clicking in Chrome F12 into the Console operation.

It should be noted that the call to Loadurl () in WebView before 4.4 results in a Web page overload (after 4.4 the phenomenon has no significant effect), while the web overload causes the soft keyboard input focus to disappear and so on. passing parameters to JavaScript

The first thing we need to be aware of is that JavaScript is weakly typed , so for the parameters passed from Java, we need to process them in JavaScript instead of taking them for granted.

For arguments in the form of strings, be sure to remember to use single quotes ' to wrap ' them, otherwise JavaScript (possibly) cannot parse the string, prompting undefined.

In addition to this accident, notice a pit, assuming that we want to pass a string containing \ or%5c in the JavaScript, which will result in the escape in JavaScript, so we need to process \ or%5c. For example, we can do a string replacement, change to \, and \ \ will be escaped to what we really need.

The rest of the story is simple, like in JavaScript there's a way:

Inserts a section of HTML
function inserthtml (HTML) {
    ...

In WebView we can call this:

String html = ...;
html = Html.replaceall ("\\\\", "\\\\\\\\");

JavaScript calls Java methods

To invoke the relevant Java method in JavaScript, you need to make some settings for WebView.

First we need to add the interface that JavaScript can call directly in WebView, for convenience I will pass the whole WebView as interface object directly to Addjavascriptinterface (), and remember to give the interface object a name;

We then add @javascriptinterface annotations to all Java methods that JavaScript can invoke;

You can then invoke the Java method in your JavaScript code. The overall code might look like this:

The public class is Mywebview extends WebView {public
    mywebview {
        ...
        GetSettings (). Setjavascriptenabled (true);
        Addjavascriptinterface (This, "myname");
        ...
    }

    @JavascriptInterface public
    Void Example () {
        ...
    }

Write this in JavaScript:

Call the example () method
Function Example () {
    myname.example () in Mywebview.

get the return value of JavaScript

Many times we use JavaScript not just to execute a method, but rather to get a return value, such as a Boolean value, or a string.

In Android 4.4 and above, Google provides a method called Evaluatejavascript () in WebView, which, when you expect the JavaScript method to execute, produces a callback that returns the string form of the return value. So you need to manually convert to the desired type. A specific example can refer to this link.

Of course, we can also use a simple and compatible version of the Android approach to achieve. For example, we have such a method in Mywebview:

@JavascriptInterface public
void log (String tag, boolean value) {
    LOG.V (tag, string.valueof (value));

Write this in JavaScript:

function log () {
    MyName.log ("tag", true);

Javabridge automatically converts the argument to the desired type, provided you guarantee that the conversion must be correct. about changes to the UI level

Android only allows you to modify the UI in the main thread. If you invoke the WebView method in JavaScript to modify the interface, because Javabridge is not in the main thread, we want to create a new Handler in the main thread to manipulate the UI.

public class Mywebview extends WebView {
    private Handler Handler = new Handler (Looper.getmainlooper ());

    ...

    @JavascriptInterface public
    void Changeui () {
        handler.post (new Runnable () {
            ...
        });
    }

Chrome Remote Debugging

If you are using Android 4.4 and its version of WebView, then this will be a very useful feature that can refer to this link.

If you do not understand the above article, you can refer to Google's official documents. Return