基于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')" />

(0)

相关推荐

  • android webview中使用Java调用JavaScript方法并获取返回值

    在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC

  • Android中在WebView里实现Javascript调用Java类的方法

    为了方便网页和Android应用的交互,Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制.只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上. 1.映射Java对象到JavaScript对象上 复制代码 代码如下: mWebView = (WebView) findViewById(R.id.wv_content); mWebView.setVerticalScrollbarOverlay(tr

  • Android WebView上实现JavaScript与Java交互

    其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css.js文件和页面上的图片资源进行加载.如果webkit的缓存里面有,就不加载.加载完这些资源之后,就进行css的渲染和js的执行.Css的渲染一般不

  • Android总结之WebView与Javascript交互(互相调用)

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web

  • Android中 webView调用JS出错的解决办法

    问题 webView调用JS出错. 复制代码 代码如下: class TestJS {         ......         public TestJS(){         }                 public void save(String data){                        webView.loadUrl("javascript: alert(" + data +")");         }         ..

  • Android webview与js交换JSON对象数据示例

    最近几个项目的测试结果,Android无法主动通过调用 webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 这种方式将jsonobject类型的data传给js,因为js那边得到就是一个string的对象. 与此同时,js主动调用android的对象方式,android也无法返回给js一个jsonobject,需要js做一下转换,例如: Android 代码: 复制代码

  • 解析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代码的方法在网页中

  • Android WebView使用方法详解 附js交互调用方法

    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

  • Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

  • 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

  • Android中WebView无法后退和js注入漏洞的解决方案

    因重定向无法正常goBack()解决方案 首先说下问题,初始页面为A,点击某个链接跳转到B(http://xxx.com.cn/),B页面重定向到C页面(http://xxx.com.cn/website/index.html) 当调用webview.goBack()时,页面回退到B,然后接着会重定向回C页面. 这样会导致两个问题: 1. 无法回退到webview的初始页面A 2. 无法正常退出Activity或者Fragment(只有还未加载完C时进行回退才能退出页面) 关于如何解决这个问题,

  • Android webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • Android中WebView与Js交互的实现方法

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

随机推荐