文档章节

android + javascript 相互通信实例分析

飓风2000
 飓风2000
发布于 2016/07/30 15:31
字数 1496
阅读 36
收藏 4

精选30+云产品,助力企业轻松上云!>>>

关键点:
正向通讯(js调用Android方法)
1.在Android程序中为WebView控件增加一个与JS的暗号,demo。如WebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
2.在Android程序中的定义一个支持js调用的方法,需要通过注解标志@JavascriptInterface。如 @JavascriptInterface public void clickOnAndroid() {}
3.在WebView打开的网页js中按照暗号要求,定义一个js方法,window.demo.clickOnAndroid()
以上3点完成js调用android的程序

逆向通讯(android调用js方法)
1.在js定义一个方法,function wave(){}
2.在Android程序中调用js方法mWebView.loadUrl("javascript:wave()");

Android与js通讯原理:
1.在Android中定义各种支持请求的监听服务和业务实现,用于接收到js请求,生成Android的Intent对象,并且广播出去,监听服务收到这个广播开始做事情
2.在Android中定义一个专门处理js请求的类,类中的方法需要通过@JavascriptInterface 注解标志(相当于用java代码写js代码)
3.把这个可以处理js请求的java类注册到Android中的WebView控件中,并且需要写一个实例名字(这个实例名字是与js的通信约定)
4.在js中通过实例名称直接调用Android的方法

 

实例分析:

1.  AndroidManifest.xml中必须使用许可 "android.permission.INTERNET", 否则会出Web page not available错误。

<uses-permission android:name="android.permission.INTERNET"/>

2.  如果访问的页面中有Javascript,则webview必须设置支持Javascript。

1   WebSettings webSetting = webview.getSettings();
2   webSetting.setJavaScriptEnabled(true);

3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象或者覆盖webview的 setWebChromeClient

1 mWebView.setWebViewClient(new WebViewClient(){
2 public boolean shouldOverrideUrlLoading(WebView view, String url) { 
3     view.loadUrl(url); 
4     return true; 
5    }
6  });

 

复制代码

 1   mWebView.setWebChromeClient(new MyWebChromeClient()
 2             @Override
 3             public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
 4                 Log.d(LOG_TAG, message);
 5                 result.confirm();
 6                 return true;
7             });

复制代码

 

4.  如果不做任何处理,浏览网页,点击系统“Back”键,整个Browser会调用finish()而结束自身,如果希望浏览的网 页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该Back事件。

复制代码

1 public boolean onKeyDown(int keyCode, KeyEvent event) { 
2   if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
3     mWebView.goBack(); 
4     return true; 
5   } 
6   return super.onKeyDown(keyCode, event); 
7 }

复制代码

 

 5.  javascript对象 与 android 对象绑定

WebView注入Java对象

  对象注入即通过webview 建立 javascript对象 与 android 原生对象的绑定关系,下面代码中,obj1对象在android程序中可以操作,obj2在js程序中可以操作,两者操作的均为同一个内存对象,即可以理解为,两个绑定的对象是同一个对象在不同运行环境下的一个别名(仅个人理解,有误请大牛指正)

1 webview.getSetting().setJavaScriptEnable(true);  
2 class JsObject {  
3  @JavascriptInterface  4     public String toString() { return "injectedObject"; }  
5  }  
6  webView.addJavascriptInterface(new JsObject()obj1, "injectedObject"obj2);

  上面的程序建立 javascript 与android 程序的绑定关系,android 4.2 之后版本提供给js调用的函数必须带有注释语句@JavascriptInterface ,4.2版本之前向webview注入的对象所暴露的接口不是必须带有@JavascriptInterface注释语句(需要注意,android adt,eclipse生成的工程,低版本中会自动带有 anotations.jar,支持@JavascriptInterface, 而高版本中工程中,不会自动带有anotations.jar包,所以要加入注释语句@JavascriptInterface,首先要自己手动加入anotations.jar包,不要忘记import 哦!本人就犯过这么低级的错误哦)

   官方文档解释是因为这个接口允许JavaScript 控制宿主应用程序,这是个很强大的特性,但同时,在4.2的版本前存在重大安全隐患,因为JavaScript 可以使用反射访问注入webview的java对象的public fields,在一个包含不信任内容的WebView中使用这个方法,会允许攻击者去篡改宿主应用程序,使用宿主应用程序的权限执行java代码。因此4.2以后,任何为JS暴露的接口,都需要加 @JavascriptInterface 注释,这样,这个Java对象的fields 将不允许被JS访问。[2] 

   注:如果将targetSdkVersion 设置为17或者更高,但却没有给暴露的js接口加@JavascriptInterface注释,则logcat会报如下输出:

   Console: Uncaught TypeError: Object [object Object] has no method 'toString'

  (需要特注意的一点,这里的限制是通过 targetSdkVersion 为标准,即如果工程采用了android sdk的版本是4.2以上,但是 targetSdkVersion 的版本在17之下,那么该状态下生成的应用,不过报错,如果targetSdkVersion 设置为>=17 就需要特别主意,要加上 @JavascriptInterface注释语句了, 所有建议在各种版本下都采用@JavascriptInterface注释,就万无一失了)

 

6.  在做webview开发是经常会加载本机的html文件如下:

 file:///android_asset/teste.html   加载项目assets下的文件teste.html

 file:///sdcard/index.html       加载sdcard下的index.html文件

 

源代码:

android

复制代码

 1      private WebView mWebView;
 2       private Handler mHandler = new Handler();
 3       
 4       @Override
 5       protected void onCreate(Bundle savedInstanceState) {
 6           super.onCreate(savedInstanceState);
 7          setContentView(R.layout.main);
 8          mWebView = (WebView) findViewById(R.id.webview);
 9 
10          WebSettings webSettings = mWebView.getSettings();
11          webSettings.setJavaScriptEnabled(true);
12          webSettings.setSavePassword(false);
13          webSettings.setSaveFormData(false);
14          webSettings.setSupportZoom(false);
15  
16          mWebView.setWebChromeClient(new MyWebChromeClient());
17          mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
18  //      mWebView.loadUrl("http://www.baidu.com/");
19          mWebView.loadUrl("file:///android_asset/demo.html");
20      }
21      
22       final class DemoJavaScriptInterface {
23              DemoJavaScriptInterface() {
24                  Log.i("aaaa", "create DemoJavaScriptInterface");
25              }
26              /**
27               * This is not called on the UI thread. Post a runnable to invoke
28               * loadUrl on the UI thread.
29               */
30         @JavascriptInterface 31              public void clickOnAndroid() {
32                 mHandler.post(new Runnable() {
33                     public void run() {
34                          mWebView.loadUrl("javascript:wave()");
35                      }
36                  });
37              }
38          }
39          /**
40          * Provides a hook for calling "alert" from javascript. Useful for
41           * debugging your javascript.
42           */
43         final class MyWebChromeClient extends WebChromeClient {
44             @Override
45              public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
46                 result.confirm();
47                 return true;
48             }
49         }

复制代码

 

html源文件

复制代码

 1 <!DOCTYPE html>
 2 <html>
 3     <script language="javascript">
 4         /* This function is invoked by the activity */
 5         function wave() {
 6             alert("1");
 7             document.getElementById("droid").src="android_waving.png";
 8             alert("2");
 9         }
10     </script>
11     <body>
12         <!-- Calls into the javascript interface for the activity -->
13         <a onClick="window.demo.clickOnAndroid()">
14         <div style="width:80px;
15             margin:0px auto;
16             padding:10px;
17             text-align:center;
18             border:2px solid #202020;" >
19                 <img id="droid" src="android_normal.png"/><br>
20                 Click me!
21         </div></a>
22     </body>
23 </html>

复制代码

 

 

飓风2000
粉丝 42
博文 383
码字总数 147647
作品 0
浦东
高级程序员
私信 提问
加载中
请先登录后再评论。
React Native Android 源码分析之启动过程

前言 这篇开始将分析 React Native 是在 Android 端的启动过程是怎么样。 用过 React Native 的小伙伴都知道,React Native 是可以使用 JS 来编写一份代码,并可以同时跑在 Android 和 iOS ...

骑摩托马斯
2018/07/09
0
0
[Hybrid App]--Android混合开发,Android、Js的交互

AndroidJs通信 Hybird App Hybrid 开发:JsBridge - Web 和客户端的桥 Hybrid开发中,web页面往往会跟native进行交互,而JSBridge就是web页面和native进行通信的桥梁,通过JSBridge可以实现w...

osc_8wyy9cyu
2019/03/28
10
0
Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft
2018/05/15
0
0
浅谈Cordova框架的一些理解

浅谈Cordova框架的一些理解 一、总结 一句话总结:cordova是让你用web技术-HTML5,CSS3和JavaScript做做移动端开发(包括Android,ios)。而且是跨平台。 1、cordova是做什么的? Apache Cor...

osc_nyhmdnf9
2018/07/06
1
0
WebView与 JS 交互方式

前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现...

osc_gjoi3vn7
2018/08/30
6
0

没有更多内容

加载失败,请刷新页面

加载更多

JS二分查找

二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素...

osc_ftbxuxl1
22分钟前
9
0
王爽汇编语言(第三版)环境搭建(附PDF及工具下载)

一、前言 最近在学习汇编语言,使用的是读者评价非常高的王爽老师写的《汇编语言》(第三版),为了适应现在各个版本的windows操作系统,所以采用VMWare虚拟机来搭建纯DOS环境。 二、需要的工...

osc_xsd7kks3
24分钟前
4
0
关于面向对象和面向过程本质的区别(个人感悟)

前言:   接触面向对象的概念也差不多两年了,对于面向对象也有着自己的一些感悟,期间也看到过面向过程的一些文章,但总是对于两种思想没有明确的区别概念,刚好今天在某篇博客上看到对于...

osc_zf8orajc
25分钟前
7
0
6 个珍藏已久 IDEA 小技巧,这一波全部分享给你!

每周趣图 产品经理设计体验/用户实际体验 本周就不写技术分析文章了,分享几个珍藏已久的 IDEA 的「骚技巧」,助你快速完成代码。 还等什么?赶紧上车吧...... 先赞后看,养成习惯。微信搜索...

楼下小黑哥
27分钟前
3
0
关于面向对象和面向过程本质的区别(个人感悟)

前言:   接触面向对象的概念也差不多两年了,对于面向对象也有着自己的一些感悟,期间也看到过面向过程的一些文章,但总是对于两种思想没有明确的区别概念,刚好今天在某篇博客上看到对于...

osc_tjnx25e9
27分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部