Android与js页面交互实例介绍

来源：互联网发布：vmware桥接网络编辑：程序博客网时间：2024/06/07 09:24

Android与JS交互，分为android调用js页面，js页面调用android这两种情况，下面具体说下怎么实现。

首先是Html页面代码：

<html><head><metahttp-equiv="Content-Type"        content="text/html;charset=gb2312"> <scripttype="text/javascript"> function javaTojs(){ document.getElementById("content").innerHTML+=           "<br\>java调用了js函数";} functionjavaTojsWithParam(str){ document.getElementById("content").innerHTML+=           ("<br\>"+str);} </script></head><body>this is my html<br/><a onClick="window.fxl.testFunction()">点击调用java代码</a><br/><a onClick="window.fxl.testFunction('hello world')">点击调用java代码并传递参数</a><br/><div id="content">内容显示</div></body></html>

上面Html代码中，有两个页面JS方法分别是javaTojs()无参的，和 javaTojsWithParam(str)有参的，这个是供android代码来调用，从而实现android调用js；

另外页面上有两个方法，testFunction()无参的和testFunction('hello world')有参的，注意这个时候的写法必须是window.加别名.加方法名，别名是供android来识别的，注册的时候会填写；

下面是android代码了：

为了方便测试，我们把这个html页面放入工程里面的assets文件夹下面，

然后activity页面布局如下：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"   xmlns:tools="http://schemas.android.com/tools"   android:layout_width="match_parent"   android:layout_height="match_parent"    android:orientation="vertical"   tools:context="${relativePackage}.${activityClass}" >     <WebView        android:id="@+id/main_wv"       android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="6"/>     <LinearLayout       android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="4"       android:orientation="vertical" >          <Button            android:id="@+id/main_bt"           android:layout_width="fill_parent"           android:layout_height="wrap_content"            android:text="java调用JS" />               <TextView            android:id="@+id/main_tv"           android:layout_width="fill_parent"           android:layout_height="wrap_content" />    </LinearLayout>        </LinearLayout>

然后代码：

packagecom.fanxl.androidjs; importandroid.annotation.SuppressLint;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.webkit.JavascriptInterface;importandroid.webkit.WebView;importandroid.widget.Button;importandroid.widget.TextView;importandroid.widget.Toast; public classMainActivity extends Activity {  privateWebView main_wv;privateTextView main_tv;privateButton main_bt;      @Override    protected void onCreate(BundlesavedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    } @SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface" }) privatevoid initView() {main_wv= (WebView) findViewById(R.id.main_wv);main_tv= (TextView) findViewById(R.id.main_tv);main_bt= (Button) findViewById(R.id.main_bt);//点击android按钮调用js网页上的方法，实现android调用jsmain_bt.setOnClickListener(newOnClickListener() { @Overridepublicvoid onClick(View v) {//调用网页上的无参JS函数main_wv.loadUrl("javascript:javaTojs()");//调用网页上的有参JS函数main_wv.loadUrl("javascript:javaTojsWithParam("+"'我写的内容是什么呢？'"+")");}});//设置支持JSmain_wv.getSettings().setJavaScriptEnabled(true);//加载HTML网页main_wv.loadUrl("file:///android_asset/fxl.html");//增加JS接口，相应js页面的方法，实现js调用androidmain_wv.addJavascriptInterface(newObject(){ //此时注意，如果是4.2及以上版本，需要添加@JavascriptInterface，不然是不相应的//4.2以下可以不写这个，这个主要是Google为了增加安全性所加的一个标签，所有要被页面所相应的android方法都需要加@JavascriptInterfacepublicvoid testFunction(){ Toast.makeText(MainActivity.this, "js调用了java函数", Toast.LENGTH_SHORT).show();runOnUiThread(newRunnable() { @Overridepublicvoid run() {main_tv.setText("网页的JS无参方法被调用了");}});}  @JavascriptInterfacepublicvoid testFunction(final String str){Toast.makeText(MainActivity.this, "js调用了java函数"+str, Toast.LENGTH_SHORT).show();runOnUiThread(newRunnable() { @Overridepublicvoid run() {main_tv.setText("网页的JS有方法被调用了---"+"参数："+str);}});} }, "fxl"); //这里的名称就是在页面window.fxl.testFunction()所取的别名}}

代码写的很详细，就不再过多的讲述了，只需要注意4.2以上版本，需要在相应页面JS方法上面加

@JavascriptInterface标示符

实例demo下载：

http://download.csdn.net/detail/fanxl10/8178873

0 0