Android与javaScript的交互
WebView与js的交互包含两方面,一是在html中通过js调用java代码;二是在安卓java代码中调用js。
一、html中通过js调用java代码
js中调用java代码其实就记住一点,WebView设置一个和js交互的接口(这里的接口是一般的意思,不是java中接口的含义),这个接口其实就是一个一般的类,同时为这个接口取一个别名。这个过程如下:mWebView.addJavaScriptInterface(new DemoJavaScriptInterface(),"demo");
new DemoJavaScriptInterface()
就是这个接口,demo就是这个接口的别名。
上面的代码执行后在html中js就能通过别名(这里是“demo”)来调用DemoJavaScriptInterface
类中的任何方法了。
如果我们想让html中的一个button点击之后调用java中的函数可以这样:<input type="button" value="click me" onclick="window.demo.clickOnAndroid()"/>
但是因为安全问题,在Android4.2中(如果应用的android:targetSdkVersion为17+)JS只能访问带有@javaScriptInterface注解的java函数,所以开发版本较高的时候,在需要被调用的函数前加上这个注解。4.2以下为了安全尽量不要调用addJavascriptInterface,需要另谋他法。
下面是google官方给的实例:WebViewDemo.java
[代码]java代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
package com.google.android.webviewdemo; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; /** * Demonstrates how to embed a WebView in your activity. Also demonstrates how * to have javascript in the WebView call into the activity, and how the activity * can invoke javascript. * <p> * In this example, clicking on the android in the WebView will result in a call into * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code * will turn around and invoke javascript using the {@link WebView#loadUrl(String)} * method. * </p><p> * Obviously all of this could have been accomplished without calling into the activity * and then back into javascript, but this code is intended to show how to set up the * code paths for this sort of communication. * */ public class WebViewDemo extends Activity { private static final String LOG_TAG = "WebViewDemo" ; private WebView mWebView; private Handler mHandler = new Handler(); @Override public void onCreate(Bundle icicle) { super .onCreate(icicle); setContentView(R.layout.main); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setSavePassword( false ); webSettings.setSaveFormData( false ); webSettings.setJavaScriptEnabled( true ); webSettings.setSupportZoom( false ); mWebView.setWebChromeClient( new MyWebChromeClient()); mWebView.addJavascriptInterface( new DemoJavaScriptInterface(), "demo" ); mWebView.loadUrl( "file:///android_asset/demo.html" ); } final class DemoJavaScriptInterface { DemoJavaScriptInterface() { } /** * This is not called on the UI thread. Post a runnable to invoke * loadUrl on the UI thread. */ public void clickOnAndroid() { mHandler.post( new Runnable() { public void run() { mWebView.loadUrl( "javascript:wave()" ); } }); } } /** * Provides a hook for calling "alert" from javascript. Useful for * debugging your javascript. */ final class MyWebChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { Log.d(LOG_TAG, message); result.confirm(); return true ; } } }</p> |
demo.html
[代码]xml代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
< html > < script language = "javascript" > /* This function is invoked by the activity */ function wave() { alert("1"); document.getElementById("droid").src="android_waving.png"; alert("2"); } </ script > < body > <!-- Calls into the javascript interface for the activity --> < a onClick = "window.demo.clickOnAndroid()" > < div style="width:80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #202020;" > < img id = "droid" src = "android_normal.png" />< br > Click me! </ div > </ a > </ body > </ html > |
main.xml
[代码]xml代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" > < TextView android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "@string/intro" android:padding = "4dip" android:textSize = "16sp" /> < WebView android:id = "@+id/webview" android:layout_width = "fill_parent" android:layout_height = "0dip" android:layout_weight = "1" /> </ LinearLayout > |
Android调用js
调用webview页面内的js方法,调用形式:mWebView.loadUrl("javascript:wave()");
其中wave()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。但java不能直接获取Js方法的返回结果。
小结
具体交互流程如下:
- 点击图片,则在js端直接调用android上的方法clickOnAndroid();
- clickOnAndroid()方法(利用线程)调用js的方法。
- 被调用的js直接控制html。
利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了,而html布局样式之类有DW这样强大的工具,而且网上很多源码,很多代码片。在UI和视觉效果上就会节省很多时间,重复发明轮子没有任何意义。
交互结果
Android Webview中Java调用Js方法很容易,loadUrl("javascript:isOk()")
就可以调用isOk这个Js方法,但不能直接获取Js方法的返回结果。
1.传统的方法中,Js获取Java信息可以采用如下方式:
[代码]java代码:
1
2
3
4
5
6
7
|
class JsObject { @JavascriptInterface public String toString() { return "injectedObject" ; } } webView.addJavascriptInterface( new JsObject(), "injectedObject" ); webView.loadData( "" , "text/html" , null ); webView.loadUrl( "javascript:alert(injectedObject.toString())" ); |
2.Java获取Js信息(如通过Js获取网页源代码)可以这样:
[代码]java代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.util.Log; import android.webkit.WebView; import android.webkit.WebViewClient; public class HtmlSource extends Activity { private WebView webView; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); webView = (WebView)findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled( true ); webView.addJavascriptInterface( new InJavaScriptLocalObj(), "local_obj" ); webView.setWebViewClient( new MyWebViewClient()); webView.loadUrl( "http://www.cnblogs.com/hibraincol/" ); } final class MyWebViewClient extends WebViewClient{ public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ; } public void onPageStarted(WebView view, String url, Bitmap favicon) { Log.d( "WebView" , "onPageStarted" ); super .onPageStarted(view, url, favicon); } public void onPageFinished(WebView view, String url) { Log.d( "WebView" , "onPageFinished " ); view.loadUrl( "javascript:window.local_obj.showSource(''+" + "document.getElementsByTagName('html')[0].innerHTML+'');" ); super .onPageFinished(view, url); } } final class InJavaScriptLocalObj { public void showSource(String html) { Log.d( "HTML" , html); } } } |
当网页中有超链接跳转时,将会调用WebClient的shouldOverrideUrlLoading
方法,若设置 WebViewClient 且该方法返回 true,则说明由应用的代码处理该 url,WebView 不处理,就可以达到拦截跳转的效果。
Android与javaScript的交互的更多相关文章
- Android WebView JavaScript交互
今天介绍一下,Android中Webview与JavaScript的交互,首先是在布局文件里添加webview控件: <WebView android:id="@+id/webview ...
- 客户端相关知识学习(三)之Android原生与H5交互的实现
Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...
- Android和JavaScript相互调用的方法
转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...
- [置顶] android 与JavaScript的互相调用
1.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...
- android与javascript相互调用
下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jque ...
- C# WinForm 和 javascript进行交互 使用HTML做界面
01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...
- Android - 和其他APP交互 - 获得activity的返回值
启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...
- Android - 和其他APP交互 - 把用户带到其他app
Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...
- [Unity][安卓]Unity和Android Studio 3.0 交互通讯(1)Android Studio 3.0 设置
[安卓]Android Studio 3.0 JDK安卓环境配置(2017.10) http://blog.csdn.net/bulademian/article/details/78387052 [ ...
随机推荐
- 【Edit Distance】cpp
题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...
- MOCTF-火眼金睛
MOCTF-火眼金睛 http://119.23.73.3:5001/web10/ 把这个题目当作python爬虫来练习. 首先要获取到文本框里面的全部信息, import requests impo ...
- java线程安全问题原因及解决办法
1.为什么会出现线程安全问题 计算机系统资源分配的单位为进程,同一个进程中允许多个线程并发执行,并且多个线程会共享进程范围内的资源:例如内存地址.当多个线程并发访问同一个内存地址并且内存地址保存的值是 ...
- 14 Java虚拟机实现 synchronized
java 中的 synchronized 运行 在 Java 中,我们经常用 synchronized 关键字对程序进行加锁.无论是一个代码块还是静态方法或者实例方法,都可以直接用 synchroni ...
- POJ2796 Feel Good -- 单调队列
Feel Good Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 14489 Accepted: 4015 Case T ...
- Linux抓包工具tcpdump命令详解
1.简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中 ...
- BZOJ 1864:[Zjoi2006]三色二叉树(树DP)
三色二叉树 问题描述 输入 仅有一行,不超过500000个字符,表示一个二叉树序列. 输出 输出文件也只有一行,包含两个数,依次表示最多和最少有多少个点能够被染成绿色. 样例输入 1122002010 ...
- 【bzoj4896】[Thu Summer Camp2016]补退选 Trie树+STL-vector
题目描述 X是T大的一名老师,每年他都要教授许多学生基础的C++知识.在T大,每个学生在每学期的开学前都需要选课,每次选课一共分为三个阶段:预选,正选,补退选:其中"补退选"阶段最 ...
- 使用SS5搭建linux下的sock5代理服务器
http://sourceforge.net/projects/ss5/下载最新源码 apt-get install libpam0g-dev apt-get install libldap2-dev ...
- P4302 [SCOI2003]字符串折叠
题目描述 折叠的定义如下: 一个字符串可以看成它自身的折叠.记作S = S X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) = SSSS…S(X个S). 如果A = A’, B = ...