相互调用

相互调用指JS调用Android的资源，同时Android也可以调用JS，当然整个HTML元素都是可以取的，只是一般Android调用JS执行函数最为常见。使用一个例子作为回顾，基本上最为简单了，没有用到JSBridge之类的库。对于Android
4.4 以上的版本呢需要在声明JavascriptInterface 注解，否则无法执行JS，4.4以下没有这项权限检查。

assets下的html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<form name="input" action="form.html" method="get">
    Enter Email: <input type="text" id="emailAddress"/>
    <input type="submit" value="Submit"/>
</form>
</html>

1
2
3
4
5
6
7
8

非常简单的一个表单。一会我们就会读取其中的emailAddress，在webview关闭前把输入的值保存在SharedPreference，然后在加载时将这个保存的值加载到webview中。

1. 定义JScriptInterface

private class MyJavaScriptInterface {
        //Store an element in preferences
        @JavascriptInterface
        public void storeElement(String id, String element) {
            SharedPreferences.Editor edit = getPreferences(Activity.MODE_PRIVATE).edit();
            edit.putString(id, element);
            edit.commit();
            //If element is valid, raise a Toast
            if (!TextUtils.isEmpty(element)) {
                Toast.makeText(MyActivity.this, element, Toast.LENGTH_SHORT).show();
            }
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13

JS传入值，然后Android保存emailAddress值。

2. 定义JS语句

   private static final String JS_SETELEMENT =
            "javascript:document.getElementById('%s').value='%s'";
    private static final String JS_GETELEMENT =
            "javascript:window.BRIDGE.storeElement('%s',document.getElementById('%s').value)";
    private static final String ELEMENTID = "emailAddress";


1
2
3
4
5
6

注意这里的BRIDGE下面会讲的，是前面定义MyJavaScriptInterface的一个引用。

3. 执行JS

executeJavascript(view,
                    String.format(JS_GETELEMENT, ELEMENTID, ELEMENTID));

    private void executeJavascript(WebView view, String script) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript(script, null);
        } else {
            view.loadUrl(script);
        }
    }

1
2
3
4
5
6
7
8
9
10

这里作了Android版本判断。

这里直接贴个全部代码方便查看

@TargetApi(19)
public class MyActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView webview = new WebView(this);
        //Javascript is not enabled by default
        webview.getSettings().setJavaScriptEnabled(true);
        webview.setWebViewClient(mClient);
        //Attach the custom interface to the view
        webview.addJavascriptInterface(new MyJavaScriptInterface(), "BRIDGE");

        setContentView(webview);

        webview.loadUrl("file:///android_asset/form.html");
    }

    private static final String JS_SETELEMENT =
            "javascript:document.getElementById('%s').value='%s'";
    // 这里的window.BRIDGE则是JS调用了原生的JSinterface
    private static final String JS_GETELEMENT =
            "javascript:window.BRIDGE.storeElement('%s',document.getElementById('%s').value)";
    private static final String ELEMENTID = "emailAddress";

    private WebViewClient mClient = new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            //Before leaving the page, attempt to retrieve the email using JavaScript
            executeJavascript(view,
                    String.format(JS_GETELEMENT, ELEMENTID, ELEMENTID));
            return false;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            // 这里便是调用JS语句
            //When page loads, inject address into page using JavaScript
            SharedPreferences prefs = getPreferences(Activity.MODE_PRIVATE);
            executeJavascript(view,
                    String.format(JS_SETELEMENT, ELEMENTID, prefs.getString(ELEMENTID, "")));
        }
    };

    private void executeJavascript(WebView view, String script) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript(script, null);
        } else {
            view.loadUrl(script);
        }
    }

    private class MyJavaScriptInterface {
        //Store an element in preferences
        @JavascriptInterface
        public void storeElement(String id, String element) {
            SharedPreferences.Editor edit = getPreferences(Activity.MODE_PRIVATE).edit();
            edit.putString(id, element);
            edit.commit();
            //If element is valid, raise a Toast
            if (!TextUtils.isEmpty(element)) {
                Toast.makeText(MyActivity.this, element, Toast.LENGTH_SHORT).show();
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

相互调用

assets下的html

1. 定义JScriptInterface

2. 定义JS语句

3. 执行JS

发送评论 编辑评论

发送评论编辑评论