android中利用webview调用网页上的js代码和注意事项

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

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

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.loadUrl("javascript:test()");

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

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

mWebView.addJavascriptInterface(new Object() { 

            public void clickOnAndroid() { 

                mHandler.post(new Runnable() { 

                    public void run() { 

                        Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();

                    } 

                }); 

            } 

        }, "demo");

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

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

3. Java代码调用js并传参

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

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

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

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

mWebView.addJavascriptInterface(new Object() { 

            public void clickOnAndroid(final int i) { 

                mHandler.post(new Runnable() { 

                    public void run() { 

                                int j = i;

                                j++;

Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();

                    }

                });

            } 

        }, "demo");

然后在html页面中，利用如下代码<div id='b'><a onclick="window.demo.clickOnAndroid(2)">b.c</a></div>，

即可实现调用

注意事项：

（android webview js与android互动注意事项）

用2.3.1开发会出 

ERROR/InputDispatcher(61): channel '40723150 com.JavaScriptCom/com.JavaScriptCom.JavaScriptCom (server)' ~ Channel is unrecoverably broken and will be disposed!

这个错误,必须用2.1的模拟器,这个估计是BUG.

附代码:

AndroidManifest.xml

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

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

    package="com.JavaScriptCom" android:versionCode="1"

    android:versionName="1.0">

    <application android:icon="@drawable/icon" android:label="@string/app_name">

        <activity android:name=".JavaScriptCom" android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

    <uses-sdk android:minSdkVersion="7" />

</manifest> 

JavaScriptCom.java

package com.JavaScriptCom;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.view.View;

import android.view.View.OnClickListener;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

public class JavaScriptCom extends Activity {

    final class runJavaScript {

        public void runOnAndroidJavaScript(final String str) {

            h.post(new Runnable() {

                // @Override

                public void run() { 

                    TextView show = (TextView) findViewById(R.id.show);

                    show.setText("This is a message from javascript:" + str);

                }

            });

        }

    }

    private EditText txt;

    private WebView wv;

    private Button btn;

    private Handler h = new Handler();

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        setContentView(R.layout.main);

        txt = (EditText) findViewById(R.id.txt);

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

        btn = (Button) findViewById(R.id.btn);

        WebSettings webSettings = wv.getSettings();

        webSettings.setJavaScriptEnabled(true);

        webSettings.setSaveFormData(false);

        webSettings.setSavePassword(false);

        webSettings.setSupportZoom(false);

        wv.addJavascriptInterface(new runJavaScript(), "myjs");

        String url = "file:///android_asset/android.html";

        wv.loadUrl(url);

        btn.setOnClickListener(new OnClickListener() {

            public void onClick(View arg0) {

                // TODO Auto-generated method stub

                wv.loadUrl("javascript:get4Android('"

                        + txt.getText().toString() + "')");

            }

        });

    }

}

android.html

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" type="text/javascript">

function get4Android(str){

 document.getElementById("show").innerHTML="This is a message from android:"+str;

 }

function send2Android(){

 var str = document.getElementById("mess").value;

 window.myjs.runOnAndroidJavaScript(str);//调用android的函数

 }

</script>

</head>

<body>

 <input type="text" id="mess" />

 <input type="button" value="Send To Android"  onclick="send2Android()"/>

<div id="show"></div>

</body>

</html>

main.xml

<?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">

    <EditText android:id="@+id/txt" android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

    <Button android:id="@+id/btn" android:layout_width="fill_parent"

        android:layout_height="wrap_content" android:text="Send To JavaScript" />

    <TextView android:id="@+id/show" android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

    <WebView android:id="@+id/wv" android:layout_width="fill_parent"

        android:layout_height="fill_parent" />

</LinearLayout>