Android中WebView与Javascript的交互

为了方便网页和Android应用的交互，Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制。只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上。

1、映射Java对象到JavaScript对象上
mWebView = (WebView) findViewById(R.id.wv_content);
mWebView.setVerticalScrollbarOverlay(true);
final WebSettings settings = mWebView.getSettings();
settings.setSupportZoom(true);

//WebView启用Javascript脚本执行
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);

//映射Java对象到一个名为”js2java“的Javascript对象上
//JavaScript中可以通过"window.js2java"来调用Java对象的方法
mWebView.addJavascriptInterface(new JSInvokeClass(), "js2java");

/**网页Javascript调用接口**/

class JSInvokeClass {

public void back() {
activity.finish();
}
}

2、JavaScript调用Java对象示例
调用上述JSInvokeClass类对象的back方法，如下：

window.js2java.back();

另：

1.android中利用webview调用网页上的js代码。

Android中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true，，然后通过loadUrl就可以直接进行调用，如下所示：

1 2	`mWebView.getSettings().setJavaScriptEnabled(` `true` `);` `mWebView.loadUrl(` `"javascript:test()"` `);`

2.网页上调用android中java代码的方法

在网页中调用java代码，需要在webview控件中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(newObject() {
publicvoidclickOnAndroid() {
mHandler.post(newRunnable() {
publicvoidrun() {Toast.makeText(Test.this,"测试调用java", Toast.LENGTH_LONG).show();}});}},"demo");

在网页中，只需要像调用js方法一样，进行调用就可以

1	`<` `div` `id` `=` `'b'` `><` `a` `onclick` `=` `"window.demo.clickOnAndroid()"` `>b.c</` `a` `></` `div` `>`

3.Java代码调用js并传参

首先需要带参数的js函数，如function test(str)，然后只需在调用js时传入参数即可，如下所示：

1	`mWebView.loadUrl(` `"javascript:test('aa')"` `);`

4.Js中调用java函数并传参

首先一样需要带参数的函数形式，但需注意此处的参数需要final类型，即得到以后不可修改，如果需要修改其中的值，可以先设置中间变量，然后进行修改。如下所示：

mWebView.addJavascriptInterface(newObject() {
publi cvoidclickOnAndroid(finalinti) {
mHandler.post(newRunnable() {
publicvoidrun() {
intj = i;
j++;
Toast.makeText(Test.this,"测试调用java"+ String.valueOf(j), Toast.LENGTH_LONG).show();}});}},"demo");

然后在html页面中，利用如下代码

1	`<` `div` `id` `=` `'b'` `><` `a` `onclick` `=` `"window.demo.clickOnAndroid(2)"` `>b.c</` `a` `></` `div` `>`

即可实现调用

更多相关文章

随机推荐