Android与javascript交互(2)

initListener();

}

private void initView() {

mWebView = (WebView) findViewById(R.id.webview);

call_js = findViewById(R.id.call_js);

call_js_double = findViewById(R.id.call_js_double);

}

//sdk 17 以上加上注解

@SuppressLint(“JavascriptInterface”)

private void initData() {

// 启用javascript

mWebView.getSettings().setJavaScriptEnabled(true);

// 从assets目录下面的加载html

mWebView.loadUrl(“file:///android_asset/index.html”);

//设置本地调用对象及接口,js调用android就需要用到该对象,这里的"maomao"对象名称要与HTML文件中的保持一致

//第一个参数是一个对象,可以新建类创建对象,我们传activity即可,第二个参数是对象的名称,符合规则随意命名

mWebView.addJavascriptInterface(MainActivity.this, “maomao”);

}

private void initListener() {

call_js.setOnClickListener(this);

call_js_double.setOnClickListener(this);

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.call_js:

performCallJs();

break;

case R.id.call_js_double:

performCallJSDuuble(100, 200);

break;

default:

break;

}

}

/**

• 调用JS有参方法,调用js多参方法时用逗号拼接参数

• @param gg

• @param cc

*/

private void performCallJSDuuble(int gg, int cc) {

mWebView.loadUrl(“javascript:calljsdouble(” + gg + “,” + cc + “)”);

}

/**

• 调用JS空参方法

*/

private void performCallJs() {

mWebView.loadUrl(“javascript:javacalljs()”);

}

}

注意：

上面代码中有一个方法：

performCallJSDuuble(int gg, int cc)

该方法是Android调用Js并且向Js传递两个int 类型的参数,如果传递字符串参数请注意,写法如下：

mWebView.loadUrl(“javascript:calljsdouble(‘22’,‘boo’)”);//向js 传递两个字符串(其中22,boo是要传递的字符串示例)

android调用js代码的核心是WebView.loadUrl(“javascript:要调用的js中的方法及参数”);

到这我们已经可以做到android调用js了。

效果：

下面看js如何调用android

我们上面的代码中有一句代码很关键：

mWebView.addJavascriptInterface(MainActivity.this, “maomao”);

这就是js调用android的核心所在,通过js接口我们传给js一个Android对象,js有了Android里面的对象,自然可以调用该对象所具有的方法。

我们给js传的对象是一个MainActivity的实例,我们给这个对象起的名字叫"maomao",关键的一步做了之后,我们看HTML中如何调用Android方法

<input type=“button” value=“点击调用Android代码” οnclick=“window.maomao.callAndroid()”/>

<input type=“button” value=“点击调用Android代码并传递参数”

οnclick=“window.maomao.callAndroid(‘js call Android 传参’)”/>

上面的两个input节点就是我们添加到HTML文件中的用于调用android方法的,我们可以看到HTML页面使用我们传过去的"maomao"对象调用android里面的callAndroid()方法,说明android MainActivity中应该有两个callAndroid()方法,一个是空参的,一个是有参的。我们来看看MainActivity中的这两个方法：

/**

• JS调用Android空参方法

*/

@JavascriptInterface //sdk17版本以上加上注解,否则js不能调用android

public void callAndroid() {

runOnUiThread(new Runnable() {

@Override

public void run() {

Toast.makeText(MainActivity.this, “HTML 调用 Android 空参方法”, Toast.LENGTH_LONG).show();

}

});

}

/**

• JS调用Android方法并给android传参

• @param s

*/

@JavascriptInterface //sdk17版本以上加上注解

public void callAndroid(final String s) {

runOnUiThread(new Runnable() {

@Override

public void run() {

Toast.makeText(MainActivity.this, s, Toast.LENGTH_LONG).show();

}

});

}

果然MainActivity中有两个名叫callAndroid的方法,这样我们就可以通过js调用android了。

效果：

源码下载

对象篇

模块化编程-自研模块加载器