WebView和JavaScrip交互基础

简介

大家好，今天我准备给大家分享一下android中使用addJavaScriptInterface方法的一些经验。这个方法能使我们在JavaSscript函数中调用activity中的任意方法。关于addJavaScriptInterface，我要提醒几点：

1.addJavaScriptInterface方法能实现能将网页数据传递给android 的xml视图中，反之亦然。

2.你能在网页中激发一个activity方法，反之亦然。

3.这本身是一个很实用的功能，但当webView加载html来自于一个不受信任的url时，可能会带来风险，因为黑客可以通过注入而已html代码来调用他们想调用的代码。

4.绝对不要在html代码不是你写的情况下使用addJavascriptInterface()。

这篇文章涵盖了如下内容：

1.如何实现JavaScriptInterface 和其方法。

2.通过这个Interface更改UI上的TextView 的显示。

3.相关的源码。

背景知识

点击这里查看关于 Webview和addJavascriptInterface的更多知识。

代码讲解

在eclipse中新建一个名叫JavaScriptInterfaceDemo的工程。然后在_AndroidManifest.xml_ 文件中加入访问internet的权限

<uses-permission android:name="android.permission.INTERNET"/>

Then I created a folder named www within my asset folder. After that I created a file index.html within the www folder. I have used webview and textview controls in my layout file named main.xml. My main.xml code is given below.

然后在_asset_目录下新建一个www的目录，在www目录下创建一个index.html的文件。布局文件main.xml中包含了一个textView和一个WebView,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
     <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"     
        android:textAppearance="?android:attr/textAppearanceLarge" />
   </LinearLayout>
</LinearLayout>

下面来看看JavaScriptInterfaceDemoActivity.java class的代码：

package my.demo;
import my.demo.R;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;
public class JavaScriptInterfaceDemoActivity extends Activity {
    private WebView Wv;
    private TextView myTextView;   
    final Handler myHandler = new Handler();
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Wv = (WebView)findViewById(R.id.webView1);
        myTextView = (TextView)findViewById(R.id.textView1);       
        final JavaScriptInterface myJavaScriptInterface
        = new JavaScriptInterface(this);        
        Wv.getSettings().setLightTouchEnabled(true);
        Wv.getSettings().setJavaScriptEnabled(true);
        Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
        Wv.loadUrl("file:///android_asset/www/index.html");
    }
    public class JavaScriptInterface {
        Context mContext;
        JavaScriptInterface(Context c) {
            mContext = c;
        }
        public void showToast(String webMessage){          
            final String msgeToast = webMessage;           
             myHandler.post(new Runnable() {
                 @Override
                 public void run() {
                     // This gets executed on the UI thread so it can safely modify Views
                     myTextView.setText(msgeToast);
                 }
             });
           Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show();
        }
    }
}