WebView与js交互

我的歌声里 曲婉婷 - Everything In The World (白金庆功版)

背景：Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、jS的相关开发技术，以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖，通常会在原生的Android 嵌入部分的html了。

这样一来就避免不了为js数据交互。

我们新建一个简单的布局，只有一个webview控件

<WebView

android:id="@+id/webView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

我们找到这个webView，并加上载本地的main.html，其中main.html存储在工程文件的assets根目录下。

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

webView.addJavascriptInterface(new JSObject(context), "aikaifa");

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);// 支持js

Handler handler = new Handler();

handler.postDelayed(new Runnable() {

public void run() {

webView.loadUrl("file:///android_asset/main.html");

}

}, 500);

1js调用Android方法

细心的你应该会注意到上面有个JSObject类，没错，就是这个开启了入口，前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示，可以随便改成你喜欢的。

我们来看一下JSObject 这个类：

public class JSObject {

private Context context;

public JSObject(Context context){

this.context=context;

}

@JavascriptInterface

public void goBack({

Activity activity = (Activity) context;

activity.finish();

}

}

该类定义了goBack方法，注入JS可以调用。

js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。

这样前端就可以很方便调用我们Android这边的方法了。

2Android调用JS方法

既然js可以调用我们的方法，那我们同样也调用js方法

例如我们想调用js 中getName方法。

我们可以这样写。

public void getTestJS()

{

Timer timer = new Timer();

final Handler handler = new Handler(){

public void handleMessage(Message msg) {

switch (msg.what) {

case 1:

webView.loadUrl("javascript:getName()");

break;

}

super.handleMessage(msg);

}

};

timer.schedule(new TimerTask() {

public void run() {

Message msg = new Message();

msg.what = 1;

handler.sendMessage(msg);

}

}, 500, 500);

}

其中getName方法是js中的一个方法，我们可以在需要的地方调用getTestJS方法就可以了。

这样WebView与js交互就大致完成了。

我的歌声里 曲婉婷 - Everything In The World (白金庆功版)

背景：Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、jS的相关开发技术，以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖，通常会在原生的Android 嵌入部分的html了。

这样一来就避免不了为js数据交互。

我们新建一个简单的布局，只有一个webview控件

<WebView

android:id="@+id/webView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

我们找到这个webView，并加上载本地的main.html，其中main.html存储在工程文件的assets根目录下。

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

webView.addJavascriptInterface(new JSObject(context), "aikaifa");

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);// 支持js

Handler handler = new Handler();

handler.postDelayed(new Runnable() {

public void run() {

webView.loadUrl("file:///android_asset/main.html");

}

}, 500);

1js调用Android方法

细心的你应该会注意到上面有个JSObject类，没错，就是这个开启了入口，前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示，可以随便改成你喜欢的。

我们来看一下JSObject 这个类：

public class JSObject {

private Context context;

public JSObject(Context context){

this.context=context;

}

@JavascriptInterface

public void goBack({

Activity activity = (Activity) context;

activity.finish();

}

}

该类定义了goBack方法，注入JS可以调用。

js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。

这样前端就可以很方便调用我们Android这边的方法了。

2Android调用JS方法

既然js可以调用我们的方法，那我们同样也调用js方法

例如我们想调用js 中getName方法。

我们可以这样写。

public void getTestJS()

{

Timer timer = new Timer();

final Handler handler = new Handler(){

public void handleMessage(Message msg) {

switch (msg.what) {

case 1:

webView.loadUrl("javascript:getName()");

break;

}

super.handleMessage(msg);

}

};

timer.schedule(new TimerTask() {

public void run() {

Message msg = new Message();

msg.what = 1;

handler.sendMessage(msg);

}

}, 500, 500);

}

其中getName方法是js中的一个方法，我们可以在需要的地方调用getTestJS方法就可以了。

这样WebView与js交互就大致完成了。