WebView与JavaScript交互--Android

原创 2015年07月09日 17:46:22


转载请注明出处:  http://blog.csdn.net/forwardyzk/article/details/46819925 


在工作中,有一个这样的需求,需要用到WebView与javascript进行交互,下面我们就通过一个简单的需求来介绍.

先看一下效果图:



需求:

        1.点击一个按钮进入一个加载WebView的界面,如果此界面需要分享此界面到其他平台,那么就在当前界面展示"分享"按钮,如果不需要分享,那么就不展示"分享"按钮.

       2.在H5界面上,有一个登陆按钮,点击登陆,

             2.1 如果没有登陆,则调起登陆界面,登陆成功后,在H5界面展示登陆者.

             2.2 如果登陆了,就在H5界面直接显示当前的登陆者.

1.使webview支持js的调用.

  

webview.addJavascriptInterface(new JsHost(JsActivity.this, mHandler, webview), "jsObject");

其中JsHost是自定义的一个类, jsObject是H5页面调用客户端js方法的对象(名字也是自定义的,只要和H5javascriprt用的对象名字一样即可).


2.分享需求.

     当H5页面加载完毕后,H5页面调用客户端是否分享的方法(通过此方法讲是否分享和分享的内容传递给客户端),然后控制分享按钮是否展示

    H5页面javascrip方法:

   

window.onload = function share() {
	//分享
	var json = "{'isShare':0,'shareContent':'我是分享内容'}";
	//不分享
	var noShare = "{'isShare':-1}";
	window.jsObject.toShare(json);
}

这是H5调用客户端的javascript方法

window:代表当前页面的对象

window.onload表示当前的H5页面加载完毕后,调用后面的方法

json:表示需要分享的json字符串

noshare:表示不分享额json字符串

jsObject:是客户端定义的javascript对象

toShare(json):客户端的javascript方法,这样在客户端就可以收到json字符串.(这里传的是需要分享的json字符串)


在客户端的JsHost中定义javascript的分享方法

 /**
     * 分享的方法
     *
     * @param json
     */
    @JavascriptInterface
    public void toShare(String json) {
        Log.d(TAG, "web:" + json);

        try {
            JSONObject jsonObject = new JSONObject(json);
            int isShare = jsonObject.optInt("isShare");
            if (isShare == 0) {//表示需要分享
                mHandler.sendEmptyMessage(0);
            } else if (isShare == -1) { //表示不需要分享
                mHandler.sendEmptyMessage(1);
            }
        } catch (JSONException e) {
            Log.d(TAG, "解析异常");
        }
    }

首先要增加标识javascript的注解,@JavascriptInerface

解析传递过来的json字符串,通过Handler对象发送消息来控制分享按钮是否展示


在JsActivity方法中定义了mHandler,通过WebView的设置addJavascriprtInterface方法传递给了JsHost类中

JsActivty对应的不局文件:

activity_js.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_share"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="分享" />


    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/btn_share"></WebView>
</RelativeLayout>


private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0) {//显示分享
                btnShare.setVisibility(View.VISIBLE);//显示分享按钮
            } else if (msg.what == 1) {//隐藏分享按钮
                btnShare.setVisibility(View.GONE);//隐藏分享按钮
            } else if (msg.what == 2) {//调用登录
                Intent intent = new Intent(JsActivity.this, LoginActivity.class);
                startActivityForResult(intent, JsActivity.RESULT_OK);
            }
            super.handleMessage(msg);
        }
    };


3.登陆需求

  3.1点击登陆,如果没有登陆,弹起登陆界面

      先看H5页面点击登陆,调用客户端的js方法

<input id="loginName" type="button" onclick="isLogin()" value="登录">

function isLogin() {
	var name = window.jsObject.requestToken();
	document.getElementById("loginName").value = name;
}


点击"登录",调用了javascript中的isLogin()方法,在isLogin方法中调用客户端的requestToken()方法.此requestToken()有返回值,返回值是当前登陆者的名字.


客户端的requestToken方法

    /**
     * 请求登陆者
     *
     * @return
     */
    @JavascriptInterface
    public String requestToken() {
        if (TextUtils.isEmpty(App.getName())) {
            mHandler.sendEmptyMessage(2);
        }
        Log.d(TAG, "登陆者名字" + "name=" + App.getName());
        return TextUtils.isEmpty(App.getName()) ? "未登录" : App.getName();
    }


其中App操作登陆者的信息,有写入登陆者信息和读取登陆者信息
如果App.getName()获取登陆者的名字,如果为空,则通过mHandelr方法调起登录界面的通知.同时将当前登陆者返回给H5页面.

Intent intent = new Intent(JsActivity.this, LoginActivity.class);
                startActivityForResult(intent, JsActivity.RESULT_OK);

通过startActivityForResult方法开启登陆页面

startActivityForResult的使用方法请参考:点击

看一下登陆页面:

activity_login.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/name_des"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="name:" />

        <EditText
            android:id="@+id/edit_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/name_des" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/pass_des"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="pass:" />

        <EditText
            android:id="@+id/edit_pass"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/pass_des" />
    </RelativeLayout>

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Login" />
</LinearLayout>

当点击了login按钮,执行登陆操作

private void login() {
        String name = editName.getText().toString().trim();
        String pass = editPass.getText().toString().trim();
        if (TextUtils.isEmpty(name)) {
            Toast.makeText(getApplicationContext(), "name is empty", Toast.LENGTH_SHORT).show();
            return;
        } else if (TextUtils.isEmpty(pass)) {
            Toast.makeText(getApplicationContext(), "pass is empty", Toast.LENGTH_SHORT).show();
            return;
        } else {
            App.writeLoginInfo(name, pass);
            setResult(JsActivity.RESULT_OK);
            finish();
        }
    }

登陆成功后,把name和pass存到了App中

public class App extends Application {
    private static SharedPreferences sharedPreferences;

    @Override
    public void onCreate() {
        super.onCreate();
        sharedPreferences = getApplicationContext().getSharedPreferences("login", Context.MODE_PRIVATE);
    }

    public static void writeLoginInfo(String name, String pass) {
        sharedPreferences.edit().putString("name", name).putString("pass", pass).commit();
    }

    public static String getName() {
        return sharedPreferences.getString("name", "");
    }
}


同时在JsActivity中的onActivityResult方法中获取到通知,然后调用H5页面的loginSuccess方法,传递给H5客户端的登录者

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == RESULT_OK) {

            String name = App.getName();
            name = TextUtils.isEmpty(name) ? "未登录" : name;
            Log.d(TAG, "onActivityResult:" + "name=" + name);
            //调用H5的javascript中的loginSuccess方法
            webview.loadUrl("javascript:loginSuccess('" + name + "')");

        }

    }


webview.loadUrl("javascript:loginSuccess('"+name+"')");

这是客户端调用H5中的javascript的方法.

function loginSuccess(name) {
	document.getElementById("loginName").value = name;
}

讲name赋给id为loginName控件的value属性.

loginSuccess:是H5中的javascript方法

name:是方法参数



 总结:

    使用webview的addJavascriprtInterface(操作的对象,"javascript对象名称");

   H5调用客户端方法:

    无返回值: window.javascript对象.客户端js方法;

    有返回值: var  value=window.javascript对象.客户端js方法;

   客户端调用H5的方法:

   webview.loadUrl("javascript:方法名称(参数)");

   webview.loadUrl("javascript:方法名称()");

  

到此WebView与javascript方法互相调用已经讲解完毕,希望对大家有帮助,有不足之处往大家指出.


源码下载: 服务器和客户端的源码


Android中 WebView与Javascript简单交互

从目前市面的大部分App来讲,大致分成Native App、Web App、Hybrid App三种方式,Hybrid App单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用...
  • lvshuchangyin
  • lvshuchangyin
  • 2016年10月21日 10:42
  • 1188

Android WebView使用以及与JavaScript进行交互实例

最近项目中使用到了WebView,所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究,自己也做了一个综合性的例子,以此来记录自己的学习成果。此例子主要实现了WebV...
  • dongdengke123789
  • dongdengke123789
  • 2016年11月24日 11:24
  • 768

android WebView(四)与html交互

WebView如何与html相互交互 很多时候WebView需要和html进行交互,要么需要通过Java代码控制页面活动,要么就是通过js触发Java代码,WebView提供了中机制。 首先来看一...
  • w2865673691
  • w2865673691
  • 2015年04月09日 16:05
  • 1868

Android WebView中客户端与JavaScript的基本交互

前言WebView就不向大家介绍了,如果WebView都没了解的小伙伴可以先去看看其他类似关于WebView的使用。这次我们主要是讲一讲Android中当你的App中使用WebView的时候怎么和它去...
  • qq_25867141
  • qq_25867141
  • 2016年02月26日 17:15
  • 2564

WebView的使用以及Android与Js的交互

WebView的官方文档地址:https://developer.android.com/reference/android/webkit/WebView.html 1.想要使用WebView,需要在...
  • u012975370
  • u012975370
  • 2016年11月02日 13:48
  • 933

WebView使用与JavaScript交互详解(附完整Demo代码)

最近项目中需要用到与HTML5交互,也就是WebView的使用,与JS的交互肯定必不可少.开始写项目之前写了个测试Demo,成功完成了Java与JS的相互调用.先看效果图 下面上完整代码: 首先在...
  • liuxu841911548
  • liuxu841911548
  • 2017年02月07日 16:03
  • 1100

Android中使用WebView与JS交互全解析

1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发。为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An...
  • u012124438
  • u012124438
  • 2016年11月28日 00:22
  • 5802

Android:你要的WebView与 JS 交互方式 都在这里了

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由Android的WebView实现的,其中涉及到Android客户端与W...
  • carson_ho
  • carson_ho
  • 2017年03月22日 09:19
  • 89346

Android中 Webview中js与Activity的交互

项目中遇到需要webview与activity的交互
  • kevinlinkai
  • kevinlinkai
  • 2014年05月24日 19:18
  • 1499

Android WebView与JavaScript交互操作(Demo)

为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式。相关Hybrid APP(混合型应用)参看:http://blog.c...
  • ma_hoking
  • ma_hoking
  • 2014年06月20日 13:06
  • 5903
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebView与JavaScript交互--Android
举报原因:
原因补充:

(最多只允许输入30个字)