Android五分鐘輕松教會你掌握WebView與JS交互
背景:Android API中提供了WebView組件來實現(xiàn)對html的渲染?,F(xiàn)在HTML5、CSS3、jS的相關開發(fā)技術,以及數(shù)據(jù)交換格式json/XML。Web開發(fā)工程師的技能。為了減少對android的過度依賴,通常會在原生的Android 嵌入部分的html了。
這樣一來就避免不了為js數(shù)據(jù)交互。
我們新建一個簡單的布局,只有一個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(newJSObject(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);
1.js調用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這邊的方法了。
2.Android調用JS方法
既然js可以調用我們的方法,那我們同樣也調用js方法
例如我們想調用js 中getName方法。
我們可以這樣寫。
- public void getTestJS()
- {
- Timertimer = 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交互就大致完成了。
【本文為51CTO專欄作者“洪生鵬”的原創(chuàng)稿件,轉載請聯(lián)系原作者】