基于Android中Webview使用自定义的javascript进行回调的问题详解

先说为什么需要讨论这个问题。

现在很多的手机应用,都可能会直接嵌入一个web页面。这样做的好处:一个是功能更新方便,维护起来容易,只需要维护服务器的页面即可,不需要更新客户端;另一个是功能通用,不仅android可以用,ios也可以用,symbian也可以直接用。

那为什么现在很多手机应用并不做成web方式的呢?原因很多。一个是现阶段web方式展现能力相对较弱,如果对于应用的美观程度要求比较高,就无法使用web方式;一个是web方式速度相对较慢,用户体验会受一些影响;一个是现阶段流量还是相对宝贵,web方式流量相对较大;还有一个就是有一些功能无法使用web方式实现(关于这一点,现在又很多开源的项目可以实现手机的一些硬件功能,比如拍照啊,获取通讯录啊,都是可以的,感兴趣的可以搜索一下phoneGap。但是从现有的反馈来看,速度较慢,体验较差)。

基于以上的原因,现在很多项目会把一部分功能做成web方式的,一部分功能用其它控件来写。这就需要web页面与其它控件做一些交互。如何交互呢,就是利用自定义的javascript。

下面虚拟一个场景。

现在有一个功能,展现当前用户的好友列表,好友列表页是web方式的,点击某好友的头像以后,进入该好友的详情页面,而这个页面呢,由于某些原因,没做成web方式的。

假设好友列表页是UserListActivity,包含一个webview。好友详情页面是UserDetailActivity,包含很多控件和业务逻辑。

我们以id来唯一标示用户。好友列表页中,点击每一个好友头像,都会调用:

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

类似这样的js语句。因本文主要介绍android,而不是web开发内容,所以具体不再详述,熟悉web开发的同学很容易理解。

我们现在需要做的,就是显示用户列表页面,然后在用户点击头像以后,响应具体的js请求,跳到该好友详细页面。

下面看看大概的实现方法。

默认情况下,在WebView中是不能使用javascript的。可以通过下面的代码:
复制代码 代码如下:
WebView myWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

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

然后是注册JS接口。先看看webview的一个方法。

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.

我们在UserListActivity类的onCreate()方法中增加如下语句:

mWebView.addJavascriptInterface(this, "android");

在UserListActivity类中增加如下方法:

public void user(String id) {

// 获取id,跳转activity。

}

这样当页面调用onclick="javascript:android.user('1')"语句的时候,就可以映射到UserListActivity对象的user()方法了。

这里user方法有一个参数,是要对应js语句的user(‘1')。

下面附上所有代码。

Android部分的代码:
复制代码 代码如下:
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();

//设置js可用

webSetting.setJavaScriptEnabled(true);

// 添加js调用接口

mWebView.addJavascriptInterface(this, "android");

//载入具体的web地址

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

mWebView.setVisibility(View.VISIBLE);

mWebView.requestFocus();

}

public void user(String id) {

//跳转activity

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

intent.putExtra("id", id);

startActivity(intent);

}

}

资源文件:
复制代码 代码如下:
<?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>

Web页面的局部代码:

<img src="……" onclick="javascript:android.user('1')" />

时间: 2024-10-26 17:08:24

基于Android中Webview使用自定义的javascript进行回调的问题详解的相关文章

基于Android中Webview使用自定义的javascript进行回调的问题详解_Android

先说为什么需要讨论这个问题. 现在很多的手机应用,都可能会直接嵌入一个web页面.这样做的好处:一个是功能更新方便,维护起来容易,只需要维护服务器的页面即可,不需要更新客户端:另一个是功能通用,不仅android可以用,ios也可以用,symbian也可以直接用. 那为什么现在很多手机应用并不做成web方式的呢?原因很多.一个是现阶段web方式展现能力相对较弱,如果对于应用的美观程度要求比较高,就无法使用web方式:一个是web方式速度相对较慢,用户体验会受一些影响:一个是现阶段流量还是相对宝贵

android中webview控件和javascript交互实例_Android

当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释: 复制代码 代码如下: A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit

android中webview控件和javascript交互实例

当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释: 复制代码 代码如下:A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit r

Android中使用am命令实现在命令行启动程序详解_Android

在Android中,除了从界面上启动程序之外,还可以从命令行启动程序,使用的是命令行工具am. 复制代码 代码如下: usage: am [subcommand] [options]     start an Activity: am start [-D]         -D: enable debugging     send a broadcast Intent: am broadcast     start an Instrumentation: am instrument [flags

Android中系统自带锁WalkLock与KeyguardLock用法实例详解

本文实例讲述了Android中系统自带锁WalkLock与KeyguardLock用法.分享给大家供大家参考,具体如下: WalkLock - 顾名思义 唤醒锁 点亮屏幕用的 KeyguardLock - 顾名思义 键盘锁 解锁键盘用的 详细介绍: 1: WalkLock 唤醒锁 - WalkLock真的能点亮屏幕吗? 答案是肯定的. 可是有时候为什么不点亮屏幕,这个就是参数设置的问题了. 复制代码 代码如下:PowerManager.newWakeLock(PowerManager.FULL_

Android中使用am命令实现在命令行启动程序详解

在Android中,除了从界面上启动程序之外,还可以从命令行启动程序,使用的是命令行工具am. 复制代码 代码如下: usage: am [subcommand] [options] start an Activity: am start [-D]         -D: enable debugging send a broadcast Intent: am broadcast start an Instrumentation: am instrument [flags]         -r

Android中GIF动图的播放控制和监听详解

前言 最近接手的项目里涉及到了 GIF 动图的播放与监听,在上一版本中对于 GIF 的处理是由 H5 来实现的,因为考虑到用户体验,因此现在的需求是将这块儿原生化,途中差点误入歧途!下面来看看详细的介绍吧. Android 中 GIF 动图处理与监听 刚开始第一个想到的便是 glide , 但是自认为 glide 不能够控制 GIF 以及去监听它,所以网上去搜寻别的方法.看到有一个方案是将图片分帧,一张张的去用逐帧动画来实现. 我开始怀疑给这个解决方案的人了,都什么时代了还做这种费力不讨好,大量

Android中使用socket通信实现消息推送的方法详解_Android

原理最近用socket写了一个消息推送的demo,在这里和大家分享一下. 主要实现了:一台手机向另外一台手机发送消息,这两台手机可以随时自由发送文本消息进行通信,类似我们常用的QQ. 效果图: 原理:手机通过socket发送消息到服务器,服务器每接收到一条消息之后,都会把这条消息放进一个messageList里面,服务器会不停地检测messageList是否含有消息,如果有的话就会根据messageList里面item的数据,推送到相应的另一端手机上面. 下面简单画了一个图来说明这个原理: 演示

Android中使用socket通信实现消息推送的方法详解

原理 最近用socket写了一个消息推送的demo,在这里和大家分享一下. 主要实现了:一台手机向另外一台手机发送消息,这两台手机可以随时自由发送文本消息进行通信,类似我们常用的QQ. 效果图: 原理:手机通过socket发送消息到服务器,服务器每接收到一条消息之后,都会把这条消息放进一个messageList里面,服务器会不停地检测messageList是否含有消息,如果有的话就会根据messageList里面item的数据,推送到相应的另一端手机上面. 下面简单画了一个图来说明这个原理: 演