先说为什么需要讨论这个问题。
现在很多的手机应用,都可能会直接嵌入一个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 voidaddJavascriptInterface(Objectobj,StringinterfaceName)
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://blog.csdn.net/arui319");
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')" />
---------------------------------------------------------------------------
GL(arui319)
http://blog.csdn.net/arui319
<本文可以转载,但是请保留以上作者信息。谢谢。>
---------------------------------------------------------------------------
分享到:
相关推荐
本篇文章对Android中Webview使用自定义的javascript进行回调的问题进行了详细的分析介绍。需要的朋友参考下
android中WebView回调js的方法
自定义webview中的网页“拍照”按钮调用系统相机拍照的API接口MyBrowserAPI.CapturePhoto(filename),在网页JavaScript中调用以后返回存放照片的完整路径名,默认将照片存放在系统SD卡的根目录,包含整个工程中需要添加...
Android中WebView与HTML+Javascript的交互 Android中WebView与HTML+Javascript的交互
android中Webview与javascript的交互(互相调用)android中Webview与javascript的交互(互相调用)
自定义WebView页面中,长按文本的弹出选项、点击选择后,分享、转发、收藏选择文本
Android中webview使用js与java交互
Android应用源码之webview重载使用&自定义网址.zip
Android下使用Webview实现的HTML5视频播放器,播放本地视频时请加载video目录下的1.html
Android实现WebView懒加载,提前进行页面JS资源加载。减少WebView加载时间及加载资源问题。Android 8.0以前需要引入X5内核,Android 8.0以后无特殊要求。
在android的webview中实现websocket通信
webview全称叫做Android System WebView,它是Android生态系统的重要组成部分,也是Chrome浏览器的内核。可以让你的手机变得瞬间畅通,它会及时优化网页相关数据,有着接入式的操作体验数据,各种类型的应用程序可...
android中Webview与javascript的交互,Android中的点击按钮调用js方法,js点击按钮调用Android中的方法
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...
这是AOSP Webview, 包名com.android.webview, 不带google的 带google包名的可以下载 google system webview覆盖安装,可以略过 此文件包含 arm和arm64的webview这是AOSP Webview, 包名com.android.webview, 不带...
用于展示Android之WebView的简单使用方法,结合博客使用效果更好哟 http://blog.csdn.net/shiquanqq/article/details/50912392
Android APP使用WebView调用H5页面完成摄像头扫描二维码 项目使用Android Studio,打开项目可以直接运行,用过的都说好:)
android 简单webview的使用
android system webview 适配系统>=5.0