快捷導(dǎo)航

基于Android中Webview使用自定義的javascript進(jìn)行回調(diào)的問(wèn)題詳解

更新時(shí)間：2013年05月09日 11:33:07 作者：

本篇文章對(duì)Android中Webview使用自定義的javascript進(jìn)行回調(diào)的問(wèn)題進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下

先說(shuō)為什么需要討論這個(gè)問(wèn)題。

現(xiàn)在很多的手機(jī)應(yīng)用，都可能會(huì)直接嵌入一個(gè)web頁(yè)面。這樣做的好處：一個(gè)是功能更新方便，維護(hù)起來(lái)容易，只需要維護(hù)服務(wù)器的頁(yè)面即可，不需要更新客戶端；另一個(gè)是功能通用，不僅android可以用，ios也可以用，symbian也可以直接用。

那為什么現(xiàn)在很多手機(jī)應(yīng)用并不做成web方式的呢？原因很多。一個(gè)是現(xiàn)階段web方式展現(xiàn)能力相對(duì)較弱，如果對(duì)于應(yīng)用的美觀程度要求比較高，就無(wú)法使用web方式；一個(gè)是web方式速度相對(duì)較慢，用戶體驗(yàn)會(huì)受一些影響；一個(gè)是現(xiàn)階段流量還是相對(duì)寶貴，web方式流量相對(duì)較大；還有一個(gè)就是有一些功能無(wú)法使用web方式實(shí)現(xiàn)（關(guān)于這一點(diǎn)，現(xiàn)在又很多開(kāi)源的項(xiàng)目可以實(shí)現(xiàn)手機(jī)的一些硬件功能，比如拍照啊，獲取通訊錄啊，都是可以的，感興趣的可以搜索一下phoneGap。但是從現(xiàn)有的反饋來(lái)看，速度較慢，體驗(yàn)較差）。

基于以上的原因，現(xiàn)在很多項(xiàng)目會(huì)把一部分功能做成web方式的，一部分功能用其它控件來(lái)寫(xiě)。這就需要web頁(yè)面與其它控件做一些交互。如何交互呢，就是利用自定義的javascript。

下面虛擬一個(gè)場(chǎng)景。

現(xiàn)在有一個(gè)功能，展現(xiàn)當(dāng)前用戶的好友列表，好友列表頁(yè)是web方式的，點(diǎn)擊某好友的頭像以后，進(jìn)入該好友的詳情頁(yè)面，而這個(gè)頁(yè)面呢，由于某些原因，沒(méi)做成web方式的。

假設(shè)好友列表頁(yè)是UserListActivity，包含一個(gè)webview。好友詳情頁(yè)面是UserDetailActivity，包含很多控件和業(yè)務(wù)邏輯。

我們以id來(lái)唯一標(biāo)示用戶。好友列表頁(yè)中，點(diǎn)擊每一個(gè)好友頭像，都會(huì)調(diào)用：

onclick="javascript:android.user('1')"

類(lèi)似這樣的js語(yǔ)句。因本文主要介紹android，而不是web開(kāi)發(fā)內(nèi)容，所以具體不再詳述，熟悉web開(kāi)發(fā)的同學(xué)很容易理解。

我們現(xiàn)在需要做的，就是顯示用戶列表頁(yè)面，然后在用戶點(diǎn)擊頭像以后，響應(yīng)具體的js請(qǐng)求，跳到該好友詳細(xì)頁(yè)面。

下面看看大概的實(shí)現(xiàn)方法。

默認(rèn)情況下，在WebView中是不能使用javascript的?？梢酝ㄟ^(guò)下面的代碼：

復(fù)制代碼代碼如下:

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

WebSettings webSettings = myWebView.getSettings();  

webSettings.setJavaScriptEnabled(true);  

使javascript功能可用。這部分代碼都放在UserListActivity中的onCreate()方法里。

然后是注冊(cè)JS接口。先看看webview的一個(gè)方法。

public void addJavascriptInterface (Object obj, String interfaceName)

Since: API Level 1

Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScript.

IMPORTANT:

· Using addJavascriptInterface() allows JavaScript to control your application. This can be a very useful feature or a dangerous security issue. When the HTML in the WebView is untrustworthy (for example, part or all of the HTML is provided by some person or process), then an attacker could inject HTML that will execute your code and possibly any code of the attacker's choosing.
Do not use addJavascriptInterface() unless all of the HTML in this WebView was written by you.

· The Java object that is bound runs in another thread and not in the thread that it was constructed in.

Parameters

obj	The class instance to bind to JavaScript, null instances are ignored.
interfaceName	The name to used to expose the instance in JavaScript.

我們?cè)赨serListActivity類(lèi)的onCreate()方法中增加如下語(yǔ)句：

mWebView.addJavascriptInterface(this, "android");

在UserListActivity類(lèi)中增加如下方法：

public void user(String id) {

// 獲取id，跳轉(zhuǎn)activity。

}

這樣當(dāng)頁(yè)面調(diào)用onclick="javascript:android.user('1')"語(yǔ)句的時(shí)候，就可以映射到UserListActivity對(duì)象的user()方法了。

這里user方法有一個(gè)參數(shù)，是要對(duì)應(yīng)js語(yǔ)句的user(‘1')。

下面附上所有代碼。

Android部分的代碼：

復(fù)制代碼代碼如下:

package com.arui.framework.android.js;  

import android.app.Activity;  

import android.content.Intent;  

import android.os.Bundle;  

import android.view.View;  

import android.webkit.WebSettings;  

import android.webkit.WebView;  

import com.arui.framework.R;  

import com.arui.framework.android.js.UserDetailActivity;  

public class UserListActivity extends Activity {  

    private WebView mWebView;  

    @Override  

    public void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

       setContentView(R.id.userlist);  

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

       WebSettings webSetting = mWebView.getSettings();  

       //設(shè)置js可用   

       webSetting.setJavaScriptEnabled(true);  

       // 添加js調(diào)用接口   

       mWebView.addJavascriptInterface(this, "android");   

       //載入具體的web地址   

       mWebView.loadUrl("http://jb51.net");  

       mWebView.setVisibility(View.VISIBLE);  

       mWebView.requestFocus();  

    }  

    public void user(String id) {   

       //跳轉(zhuǎn)activity   

       Intent intent = new Intent(this, UserDetailActivity.class);  

       intent.putExtra("id", id);  

       startActivity(intent);  

    }   

}

資源文件：

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout   

    xmlns:android="http://schemas.android.com/apk/res/android"  

    android:orientation="vertical"  

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent" >  

    <WebView  

       android:id="@+id/mywebview"  

       android:layout_width="fill_parent"  

       android:layout_height="fill_parent"   

       android:visibility="gone"/>  

</LinearLayout>