WebView使用详解（一）——Native与JS相互调用（附JadX反编译）

最新推荐文章于 2024-03-18 18:28:55 发布
最新推荐文章于 2024-03-18 18:28:55 发布
阅读量475 收藏
点赞数 1
分类专栏： webView 文章标签： webview

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

前言：念念不忘，必有回响，永远坚持你所坚持的！


相关文章：
1、《WebView使用详解（一）——Native与JS相互调用（附JadX反编译）》
2、《WebView使用详解（二）——WebViewClient与常用事件监听》
3、《WebView使用详解（三）——WebChromeClient与LoadData补充》


一直在用WebView，还没有系统的总结过它的用法，下面就系统的总结下，分享给大家

一、基本用法

1、加载在线URL

[java]  view plain  copy
  1. void loadUrl(String url)  
这个函数主要加载url所对应的网页地址，或者用于调用网页中的指定的JS方法（调用js方法的用法，后面会讲）,但有一点必须注意的是：loadUrl()必须在主线程中执行！！！否则就会报错！！！。
注意：加载在线网页地址是会用到联网permission权限的，所以需要在AndroidManifest.xml中写入下面代码申请权限：
[html]  view plain  copy
  1. <uses-permission android:name="android.permission.INTERNET" />  
本示例效果为：

从效果图中可以明显看出本示例的布局： 
main.xml

[html]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:orientation="vertical"  
  4.               android:layout_width="fill_parent"  
  5.               android:layout_height="fill_parent"  
  6.         >  
  7.     <Button  
  8.             android:id="@+id/btn"  
  9.             android:layout_width="match_parent"  
  10.             android:layout_height="wrap_content"  
  11.             android:text="加载URL"/>  
  12.   
  13.     <WebView  
  14.             android:id="@+id/webview"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="match_parent"/>  
  17. </LinearLayout>  
对应的处理代码如下
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.     @Override  
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.main);  
  9.   
  10.         mWebView = (WebView)findViewById(R.id.webview);  
  11.         mBtn = (Button)findViewById(R.id.btn);  
  12.   
  13.         mBtn.setOnClickListener(new View.OnClickListener() {  
  14.             @Override  
  15.             public void onClick(View v) {  
  16.                 mWebView.loadUrl("http://www.baidu.com");  
  17.             }  
  18.         });  
  19.     }  
  20. }  
代码很简单，就是在点击按钮的时候加载网址，但需要注意的是：网址必须完整即以http://或者ftp://等协议开头，不能省略！不然将加载不出来，这是因为webview是没有自动补全协议功能的，所以如果我们不加，它将识别不出来网址类型，也就加载不出来了。 
但如果我们运行上面的代码，效果却是利用浏览器来打开网址，却不是使用webview打开网址：

如果我们想实现像示例一样在webview中打开网址需要怎么做呢？ 
我们需要设置WebViewClient： 
修改后的代码为：

[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.     @Override  
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.main);  
  9.   
  10.         mWebView = (WebView)findViewById(R.id.webview);  
  11.         mBtn = (Button)findViewById(R.id.btn);  
  12.   
  13.         mWebView.setWebViewClient(new WebViewClient());  
  14.   
  15.         mBtn.setOnClickListener(new View.OnClickListener() {  
  16.             @Override  
  17.             public void onClick(View v) {  
  18.                 mWebView.loadUrl("http://www.baidu.com");  
  19.             }  
  20.         });  
  21.     }  
  22. }  
在上面的基础上，我们添加了下面一段代码：
[java]  view plain  copy
  1. mWebView.setWebViewClient(new WebViewClient());  
在这里我们利用mWebView.setWebViewClient()函数仅仅设置了一个WebViewClient实例，就可以实现在WebView中打开链接了，至于原因我们下篇会讲到，这里就先忽略了，大家只需要知道要在WebView中打开链接，就必须要设置WebViewClient; 
最终的效果图就与开篇时一样的了，这里就不再帖效果图了，下面我们来看看如何加载本地html网页 
源码在文章底部给出

2、加载本地URL

一般而言，我们会将本地html文件放在assets文件夹下，比如：


web.html的内容为：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <h1>欢迎光临启舰的blog</h1>  
  7. </head>  
  8. <body>  
  9. </body>  
  10. </html>  
即大标题显示一段文字 
我们同样在上面的示例的基础上加以改造，在点击按钮的时候加载本地web.html文件
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.     @Override  
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.main);  
  9.   
  10.         mWebView = (WebView)findViewById(R.id.webview);  
  11.         mBtn = (Button)findViewById(R.id.btn);  
  12.   
  13.         mBtn.setOnClickListener(new View.OnClickListener() {  
  14.             @Override  
  15.             public void onClick(View v) {  
  16.                 mWebView.loadUrl("file:///android_asset/web.html");  
  17.             }  
  18.         });  
  19.     }  
  20. }      
从这里可以看到与加载在线URL有两点不同： 
1、URL类型不一样 
在加载本地URL时，是以“file:///”开头的，而assets目录所对应的路径名为anroid_asset，写成其它的将识别不了，这是assets目录的以file开头的url形式的固定访问形式。 
2、不需要设置WebViewClient 
这里很明显没有设置WebViewClient函数，但仍然是在webview中打开的本地文件。具体原因下篇文章讲到WebViewClient时我们会具体解释。 
本例效果图如下：

所以对于加载URL的总结就是： 
1、如果是在线网址记得添加网络访问权限 
2、在线网址中，如果要使用webview打开，记得设置WebViewClient 
3、打开本地html文件时，是不需要设置WebViewClient，对应的asstes目录的url为：file:///android_asset/xxxxx

源码在文章底部给出

3、WebView基本设置

如果我们需要设置WebView的属性，是通过WebView.getSettings()获取设置WebView的WebSettings对象,然后调用WebSettings中的方法来实现的。 
WebSettings的方法及说明如下：(这里先列出来所有的方法及解释，大家可以先忽略，看后面的举例中所使用的几个常用方法即可，用到哪个函数的时候再回来查查就可以了)

[java]  view plain  copy
  1. /** 
  2.  * 是否支持缩放，配合方法setBuiltInZoomControls使用，默认true 
  3.  */  
  4. setSupportZoom(boolean support)  
  5.   
  6. /** 
  7.  * 是否需要用户手势来播放Media，默认true 
  8.  */  
  9. setMediaPlaybackRequiresUserGesture(boolean require)  
  10.   
  11. /** 
  12.  * 是否使用WebView内置的缩放组件，由浮动在窗口上的缩放控制和手势缩放控制组成，默认false 
  13.  */  
  14. setBuiltInZoomControls(boolean enabled)  
  15.   
  16. /** 
  17.  * 是否显示窗口悬浮的缩放控制，默认true 
  18.  */  
  19. setDisplayZoomControls(boolean enabled)  
  20.   
  21. /** 
  22.  * 是否允许访问WebView内部文件，默认true 
  23.  */  
  24. setAllowFileAccess(boolean allow)  
  25.   
  26. /** 
  27.  * 是否允许获取WebView的内容URL ，可以让WebView访问ContentPrivider存储的内容。 默认true 
  28.  */  
  29. setAllowContentAccess(boolean allow)  
  30.   
  31. /** 
  32.  * 是否启动概述模式浏览界面，当页面宽度超过WebView显示宽度时，缩小页面适应WebView。默认false 
  33.  */  
  34. setLoadWithOverviewMode(boolean overview)  
  35.   
  36. /** 
  37.  * 是否保存表单数据，默认false 
  38.  */  
  39. setSaveFormData(boolean save)  
  40.   
  41. /** 
  42.  * 设置页面文字缩放百分比，默认100% 
  43.  */  
  44. setTextZoom(int textZoom)  
  45.   
  46. /** 
  47.  * 是否支持ViewPort的meta tag属性，如果页面有ViewPort meta tag 指定的宽度，则使用meta tag指定的值，否则默认使用宽屏的视图窗口 
  48.  */  
  49. setUseWideViewPort(boolean use)  
  50.   
  51.   
  52. /** 
  53.  * 是否支持多窗口，如果设置为true ，WebChromeClient#onCreateWindow方法必须被主程序实现，默认false 
  54.  */  
  55. setSupportMultipleWindows(boolean support)  
  56.   
  57. /** 
  58.  * 指定WebView的页面布局显示形式，调用该方法会引起页面重绘。默认LayoutAlgorithm#NARROW_COLUMNS 
  59.  */  
  60. setLayoutAlgorithm(LayoutAlgorithm l)  
  61.   
  62. /** 
  63.  * 设置标准的字体族，默认”sans-serif”。font-family 规定元素的字体系列。 
  64.  * font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体， 
  65.  * 则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个 
  66.  * 优先表。浏览器会使用它可识别的第一个值。 
  67.  */  
  68. setStandardFontFamily(String font)  
  69.   
  70. /** 
  71.  * 设置混合字体族。默认”monospace” 
  72.  */  
  73. setFixedFontFamily(String font)  
  74.   
  75. /** 
  76.  * 设置SansSerif字体族。默认”sans-serif” 
  77.  */  
  78. setSansSerifFontFamily(String font)  
  79.   
  80. /** 
  81.  * 设置SerifFont字体族，默认”sans-serif” 
  82.  */  
  83. setSerifFontFamily(String font)  
  84.   
  85. /** 
  86.  * 设置CursiveFont字体族，默认”cursive” 
  87.  */  
  88. setCursiveFontFamily(String font)  
  89.   
  90. /** 
  91.  * 设置FantasyFont字体族，默认”fantasy” 
  92.  */  
  93. setFantasyFontFamily(String font)  
  94.   
  95. /** 
  96.  * 设置最小字体，默认8. 取值区间[1-72]，超过范围，使用其上限值。 
  97.  */  
  98. setMinimumFontSize(int size)  
  99.   
  100. /** 
  101.  * 设置最小逻辑字体，默认8. 取值区间[1-72]，超过范围，使用其上限值。 
  102.  */  
  103. setMinimumLogicalFontSize(int size)  
  104.   
  105. /** 
  106.  * 设置默认字体大小，默认16，取值区间[1-72]，超过范围，使用其上限值。 
  107.  */  
  108. setDefaultFontSize(int size)  
  109.   
  110. /** 
  111.  * 设置默认填充字体大小，默认16，取值区间[1-72]，超过范围，使用其上限值。 
  112.  */  
  113. setDefaultFixedFontSize(int size)  
  114.   
  115. /** 
  116.  * 设置是否加载图片资源，注意：方法控制所有的资源图片显示，包括嵌入的本地图片资源。 
  117.  * 使用方法setBlockNetworkImage则只限制网络资源图片的显示。值设置为true后， 
  118.  * webview会自动加载网络图片。默认true 
  119.  */  
  120. setLoadsImagesAutomatically(boolean flag)  
  121.   
  122. /** 
  123.  * 是否加载网络图片资源。注意如果getLoadsImagesAutomatically返回false，则该方法没有效果。 
  124.  * 如果使用setBlockNetworkLoads设置为false，该方法设置为false，也不会显示网络图片。 
  125.  * 当值从true改为false时。WebView会自动加载网络图片。 
  126.  */  
  127. setBlockNetworkImage(boolean flag)  
  128.   
  129. /** 
  130.  * 设置是否加载网络资源。注意如果值从true切换为false后，WebView不会自动加载， 
  131.  * 除非调用WebView#reload().如果没有android.Manifest.permission#INTERNET权限， 
  132.  * 值设为false，则会抛出java.lang.SecurityException异常。 
  133.  * 默认值：有android.Manifest.permission#INTERNET权限时为false，其他为true。 
  134.  */  
  135. setBlockNetworkLoads(boolean flag)  
  136.   
  137. /** 
  138.  * 设置是否允许执行JS。 
  139.  */  
  140. setJavaScriptEnabled(boolean flag)  
  141.   
  142. /** 
  143.  * 是否允许Js访问任何来源的内容。包括访问file scheme的URLs。考虑到安全性， 
  144.  * 限制Js访问范围默认禁用。注意：该方法只影响file scheme类型的资源，其他类型资源如图片类型的， 
  145.  * 不会受到影响。ICE_CREAM_SANDWICH_MR1版本以及以下默认为true，JELLY_BEAN版本 
  146.  * 以上默认为false 
  147.  */  
  148. setAllowUniversalAccessFromFileURLs(boolean flag)  
  149.   
  150.   
  151. /** 
  152.  * 是否允许Js访问其他file scheme的URLs。包括访问file scheme的资源。考虑到安全性， 
  153.  * 限制Js访问范围默认禁用。注意：该方法只影响file scheme类型的资源，其他类型资源如图片类型的， 
  154.  * 不会受到影响。如果getAllowUniversalAccessFromFileURLs为true，则该方法被忽略。 
  155.  * ICE_CREAM_SANDWICH_MR1版本以及以下默认为true，JELLY_BEAN版本以上默认为false 
  156.  */  
  157. setAllowFileAccessFromFileURLs(boolean flag)  
  158.   
  159. /** 
  160.  * 设置存储定位数据库的位置，考虑到位置权限和持久化Cache缓存，Application需要拥有指定路径的 
  161.  * write权限 
  162.  */  
  163. setGeolocationDatabasePath(String databasePath)  
  164.   
  165. /** 
  166.  * 是否允许Cache，默认false。考虑需要存储缓存，应该为缓存指定存储路径setAppCachePath 
  167.  */  
  168. setAppCacheEnabled(boolean flag)  
  169.   
  170. /** 
  171.  * 设置Cache API缓存路径。为了保证可以访问Cache，Application需要拥有指定路径的write权限。 
  172.  * 该方法应该只调用一次，多次调用自动忽略。 
  173.  */  
  174. setAppCachePath(String appCachePath)  
  175.   
  176. /** 
  177.  * 是否允许数据库存储。默认false。查看setDatabasePath API 如何正确设置数据库存储。 
  178.  * 该设置拥有全局特性，同一进程所有WebView实例共用同一配置。注意：保证在同一进程的任一WebView 
  179.  * 加载页面之前修改该属性，因为在这之后设置WebView可能会忽略该配置 
  180.  */  
  181. setDatabaseEnabled(boolean flag)  
  182.   
  183. /** 
  184.  * 是否存储页面DOM结构，默认false。 
  185.  */  
  186. setDomStorageEnabled(boolean flag)  
  187.   
  188. /** 
  189.  * 是否允许定位，默认true。注意：为了保证定位可以使用，要保证以下几点： 
  190.  * Application 需要有android.Manifest.permission#ACCESS_COARSE_LOCATION的权限 
  191.  * Application 需要实现WebChromeClient#onGeolocationPermissionsShowPrompt的回调， 
  192.  * 接收Js定位请求访问地理位置的通知 
  193.  */  
  194. setGeolocationEnabled(boolean flag)  
  195.   
  196. /** 
  197.  * 是否允许JS自动打开窗口。默认false 
  198.  */  
  199. setJavaScriptCanOpenWindowsAutomatically(boolean flag)  
  200.   
  201. /** 
  202.  * 设置页面的编码格式，默认UTF-8 
  203.  */  
  204. setDefaultTextEncodingName(String encoding)  
  205.   
  206. /** 
  207.  * 设置WebView代理，默认使用默认值 
  208.  */  
  209. setUserAgentString(String ua)  
  210.   
  211. /** 
  212.  * 通知WebView是否需要设置一个节点获取焦点当 
  213.  * WebView#requestFocus(int,android.graphics.Rect)被调用的时候，默认true 
  214.  */  
  215. setNeedInitialFocus(boolean flag)  
  216.   
  217. /** 
  218.  * 基于WebView导航的类型使用缓存：正常页面加载会加载缓存并按需判断内容是否需要重新验证。 
  219.  * 如果是页面返回，页面内容不会重新加载，直接从缓存中恢复。setCacheMode允许客户端根据指定的模式来 
  220.  * 使用缓存。 
  221.  * LOAD_DEFAULT 默认加载方式 
  222.  * LOAD_CACHE_ELSE_NETWORK 按网络情况使用缓存 
  223.  * LOAD_NO_CACHE 不使用缓存 
  224.  * LOAD_CACHE_ONLY 只使用缓存 
  225.  */  
  226. setCacheMode(int mode)  
  227.   
  228. /** 
  229.  * 设置加载不安全资源的WebView加载行为。KITKAT版本以及以下默认为MIXED_CONTENT_ALWAYS_ALLOW方 
  230.  * 式，LOLLIPOP默认MIXED_CONTENT_NEVER_ALLOW。强烈建议：使用MIXED_CONTENT_NEVER_ALLOW 
  231.  */  
  232. setMixedContentMode(int mode)  
下面我们就举个例子来看下用法 
示例1：在WebView中启用JavaScript：
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.   
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.main);  
  10.   
  11.         mWebView = (WebView) findViewById(R.id.webview);  
  12.         mBtn = (Button) findViewById(R.id.btn);  
  13.   
  14.         WebSettings webSettings = mWebView.getSettings();  
  15.         webSettings.setJavaScriptEnabled(true);  
  16.     }  
  17. }  
示例2：设置缓存
优先使用缓存
[java]  view plain  copy
  1. webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  
不使用缓存：
[java]  view plain  copy
  1. webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);  
示例3：打开页面时， 自适应屏幕：
[java]  view plain  copy
  1. WebSettings webSettings =   mWebView .getSettings();         
  2. webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放  
  3. webSettings.setLoadWithOverviewMode(true);  
效果图如下：（所使用的网址为：http://www.w3school.com.cn/）

注意：对于我们自己写的网页代码，不必利用这处函数来做页面缩放适配，因为对于有些手机存在适配问题，只需要在HTML中做宽度100%自适应屏幕就行了

示例4：使页面支持缩放：

[java]  view plain  copy
  1. WebSettings webSettings = mWebView.getSettings();  
  2. //开启javascript支持  
  3. webSettings.setJavaScriptEnabled(true);   
  4. // 设置可以支持缩放  
  5. webSettings.setSupportZoom(true);  
  6. // 设置出现缩放工具  
  7. webSettings.setBuiltInZoomControls(true);  
示例5：.如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点
[java]  view plain  copy
  1. webview.requestFocusFromTouch();  
其它的设置就靠大家自己去尝试啦，这里就不再一一缀述了，大家只需要记着，如果需要设置webview就从WebSettings里面去找就可以啦。 
源码在文章底部给出

二、JS调用Java代码

在看了如何设置webview以后，我们来看下如何让Webview与网页中的JS代码交互的问题。

1、概述

更多时候，网页中需要通过JS代码来调用本地的Android代码，比如H5页面需要判断当前用户是否登录等。 
利用JS代码调用JAVA代码，主要是用到WebView下面的一个函数：
[java]  view plain  copy
  1. public void addJavascriptInterface(Object obj, String interfaceName)  
这个函数有两个参数：
  • Object obj：interfaceName所绑定的对象
  • String interfaceName：所绑定的对象所对应的名称
它有意义就是向WebView注入一个interfaceName的对象，这个对象绑定的是obj对象，通过interfaceName就可以调用obj对象中的方法，这个表述可能大家不太理解，因为interfaceName是一个String，怎么被你说成对象了，理解不了没关系，下面有具体示例

2、示例

下面同样是上面的示例，我们对它加以更改，效果图如下：


在原来html上面添加了一个按钮，当点击按钮时调用Android的Toast函数弹出一个toast消息。 
先看android代码：

[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.   
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.main);  
  10.   
  11.         mWebView = (WebView) findViewById(R.id.webview);  
  12.   
  13.         WebSettings webSettings = mWebView.getSettings();  
  14.         webSettings.setJavaScriptEnabled(true);  
  15.         mWebView.addJavascriptInterface(this, "android");  
  16.         mWebView.loadUrl("file:///android_asset/web.html");  
  17.     }  
  18.   
  19.     public void toastMessage(String message) {  
  20.         Toast.makeText(getApplicationContext(), "通过Natvie传递的Toast:"+message, Toast.LENGTH_LONG).show();  
  21.     }  
  22. }      
这里最主要是的下面这句：
[java]  view plain  copy
  1. mWebView.addJavascriptInterface(this, "android");  
这句的意思是把MyActivity对象注入到WebView中，在WebView中的对象别名叫android；另外，我们还在MyActivity中额外写了一个函数toastMessage(String message)，用于弹出MSG 
下面我们看看html代码：
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <h1>欢迎光临启舰的blog</h1>  
  7.     <input type="button" value="js调native" onclick="ok()">  
  8. </head>  
  9. <body>  
  10. <script type="text/javascript">  
  11. function ok() {  
  12.  android.toastMessage("哈哈,i m webview msg");  
  13. }  
  14. </script>  
  15. </body>  
  16. </html>  
在这个html中，我添加了一个button按钮，当点击时调用ok函数：
[html]  view plain  copy
  1. function ok() {  
  2.  android.toastMessage("哈哈,i m webview msg");  
  3. }  
它的意义就是调用android对象里的toastMessage方法，这个android就是我们利用mWebView.addJavascriptInterface(this, “android”)注入到WebView的android，它所对应的对象就将MyActivity；所以在JS中，我们就可以通过android这个别名来调用MyActivity对象中的任何public方法。 
源码在文章底部给出

3、addJavascriptInterface自定义作用对象

在上面的示例中mWebView.addJavascriptInterface(this, “android”);我们直接通过this，把当前整个类作为对象传给WebView了，但这会有很大风险，因为我们这个类中可能会有各种函数，而这些函数是只有本地Native代码才会用到，WebView是根本用不到的。所以如果通过全部注入给WebView的话，那么一些存心不良的同学就可以任意调用我们这个类中的方法，给我们APP带来危害。 
所以，一般而言，我们很少直接会传this，把整个类注入给WebView，而是单独写一个类专门用于JS交互，比如：
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.   
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.main);  
  10.   
  11.         mWebView = (WebView) findViewById(R.id.webview);  
  12.         mBtn = (Button) findViewById(R.id.btn);  
  13.   
  14.         WebSettings webSettings = mWebView.getSettings();  
  15.         webSettings.setJavaScriptEnabled(true);  
  16.         mWebView.addJavascriptInterface(new JSBridge(), "android");  
  17.         mWebView.loadUrl("file:///android_asset/web.html");  
  18.     }  
  19.   
  20.     public class JSBridge{  
  21.         public void toastMessage(String message) {  
  22.             Toast.makeText(getApplicationContext(), "通过Natvie传递的Toast:"+message, Toast.LENGTH_LONG).show();  
  23.         }  
  24.     }  
  25. }      
在这段代码中，在通过addJavascriptInterface注入时：
[java]  view plain  copy
  1. mWebView.addJavascriptInterface(new JSBridge(), "android");  
指定android对象绑定的是JSBridge对象！所以在WebView中，通过JS只能访问JSBridge中所定义的对象，如果访问其它类的函数，比如MyActivity中的函数，就会报下面的错误（即方法找不到）

大家可以自己尝试下； 
然后对应的html代码：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <h1>欢迎光临启舰的blog</h1>  
  7.     <input type="button" value="js调native" onclick="ok()">  
  8. </head>  
  9. <body>  
  10. <script type="text/javascript">  
  11. function ok() {  
  12.   android.toastMessage("哈哈,i m webview msg");  
  13.  }  
  14. </script>  
  15. </body>  
  16. </html>  
由于在注入时的对象别名和所调用的函数名都没有变，所以HTML中的JS代码是无需更改的。效果图与上节一样，就不再帖出了。 
源码在文章底部给出

4、addJavascriptInterface注入漏洞

上面我们说了在addJavascriptInterface注入时，为了防止WebView调用我们不想被它调用的函数，所以我们需要单独为WebView交互定义一个类，让它只执行这个类里面的函数 
但……这真的能挡住黑客的攻击吗？ 
当然是NO……，不然我就不会写这一段了……
[java]  view plain  copy
  1. mWebView.addJavascriptInterface(new JSBridge(), "android");  
在注入时，我们已经把对象传给了JS，在JS中当然可以通过反射得到APP中的各种类的实例！现在反编译Android代码可不是什么难事（本文结尾附jadx反编译方法），很容易拿到你有哪些类，有哪些函数，通过这些就可以想执行哪个执行哪个了，有没有细思极恐…… 
具体的细节我就不讲了，不在本篇范围，给大家找了篇文章，有兴趣的同学可以参考下： 《Android WebView的Js对象注入漏洞解决方案》

5、JavascriptInterface注解

为了解决addJavascriptInterface()函数的安全问题，在android:targetSdkVersion数值为17（Android4.2）及以上的APP中，JS只能访问带有 @JavascriptInterface注解的Java函数，所以如果你的android:targetSdkVersion是17+，与JS交互的Native函数中，必须添加JavascriptInterface注解，不然无效，比如：
[java]  view plain  copy
  1. public class JSBridge {  
  2.     @JavascriptInterface  
  3.     public void toastMessage(String message) {  
  4.         Toast.makeText(getApplicationContext(), "通过Natvie传递的Toast:" + message, Toast.LENGTH_LONG).show();  
  5.     }  
  6. }  
这也就是很多同学在高target上，addJavascriptInterface()函数无效的主要原因。
注意：虽然在target 17以后，已经修复了这个安全问题，但目前大多数APP都还是target 17以前的，所以大家可以尝试着找一些APP来演示下这个漏洞哦……

三、JAVA调用JS代码

1、JAVA调用JS代码

前面给大家演示了如何通过JS调用Java代码，这里就反过来看看，如何在Native中调用JS的代码 
本例的效果图如下：

在点击“加载URL”按钮时，调用webview中的JavaScript求和函数，将结果显示在标题中。 
先看html代码：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <h1 id="h">欢迎光临启舰的blog</h1>  
  7.     <input type="button" value="js调native" onclick="ok()">  
  8. </head>  
  9. <body>  
  10. <script type="text/javascript">  
  11. function sum(i,m)  
  12. {  
  13.  document.getElementById("h").innerHTML= (i+m);  
  14. }  
  15. </script>  
  16. </body>  
  17. </html>  
在这里，我们写了一个求和函数sum(i,m) 
结果中就是把h1标签的内容改为求和后的结果值。 
再来看看JAVA的调用代码：
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.   
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.main);  
  10.   
  11.         mWebView = (WebView) findViewById(R.id.webview);  
  12.         mBtn = (Button) findViewById(R.id.btn);  
  13.   
  14.         WebSettings webSettings = mWebView.getSettings();  
  15.         webSettings.setJavaScriptEnabled(true);  
  16.         mWebView.loadUrl("file:///android_asset/web.html");  
  17.   
  18.         mBtn.setOnClickListener(new View.OnClickListener() {  
  19.             @Override  
  20.             public void onClick(View v) {  
  21.                 mWebView.loadUrl("javascript:sum(3,8)");  
  22.             }  
  23.         });  
  24.      }  
  25. }          
在点击按钮时调用JS函数：
[java]  view plain  copy
  1. mWebView.loadUrl("javascript:sum(3,8)");  
这里也就是在JAVA中调用JS函数的方法：
[java]  view plain  copy
  1. String url = "javascript:methodName(params……);"  
  2. webView.loadUrl(url);  
javascript:伪协议让我们可以通过一个链接来调用JavaScript函数 
中间methodName是JavaScript中实现的函数 
jsonParams是传入的参数列表 
使用起来难度不大，就不再多讲了 
源码在文章底部给出

2、JAVA中如何得到JS中的返回值(Android4.4以前)

现在我们再考虑一下，如果我们要在JAVA中需要得到JS的结果返回值要怎么办？比如在上面的例子中，我们需要在JAVA中得到在计算后的结果值 
Android在4.4之前并没有提供直接调用js函数并获取值的方法，也就是说，我们只能调用JS中的函数，并不能得到该函数的返回值，想得到返回值我们就得想其它办法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。 

1.Java调用js代码

[java]  view plain  copy
  1. webView.addJavascriptInterface(this, "android");  
  2. mWebView.loadUrl("javascript:sum(3,8)");  
注意，这里通过addJavascriptInterface将MyActiviy所对应的对象注入到WebView中了。 
2.js函数处理，并将结果通过调用java方法返回
[java]  view plain  copy
  1. function sum(i,m){  
  2.  var result = i+m;  
  3.  document.getElementById("h").innerHTML= result;  
  4.  android.onSumResult(result)  
  5. }  
3..Java在回调方法中获取js函数返回值
[java]  view plain  copy
  1. public void onSumResult(int result) {  
  2.   Log.i(LOGTAG, "onSumResult result=" + result);  
  3. }  
先看下效果图：

下面我们就完整地看一下代码： 
JS代码：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <h1 id="h">欢迎光临启舰的blog</h1>  
  7.     <input type="button" value="js调native" onclick="ok()">  
  8. </head>  
  9. <body>  
  10. <script type="text/javascript">  
  11. function sum(i,m){  
  12.  var result = i+m;  
  13.  document.getElementById("h").innerHTML= result;  
  14.  android.onSumResult(result);  
  15. }  
  16. </script>  
  17. </body>  
  18. </html>  
在function sum(i,m)中，先通过result得到结果，最后通过android.onSumResult(result);将结果传给Native 
然后再来看看JAVA代码：
[java]  view plain  copy
  1. public class MyActivity extends Activity {  
  2.   
  3.     private WebView mWebView;  
  4.     private Button mBtn;  
  5.   
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.main);  
  10.   
  11.         mWebView = (WebView) findViewById(R.id.webview);  
  12.         mBtn = (Button) findViewById(R.id.btn);  
  13.   
  14.         WebSettings webSettings = mWebView.getSettings();  
  15.         webSettings.setJavaScriptEnabled(true);  
  16.         mWebView.addJavascriptInterface(this, "android");  
  17.         mWebView.loadUrl("file:///android_asset/web.html");  
  18.   
  19.         mBtn.setOnClickListener(new View.OnClickListener() {  
  20.             @Override  
  21.             public void onClick(View v) {  
  22.                 mWebView.loadUrl("javascript:sum(3,8)");  
  23.             }  
  24.         });  
  25.     }  
  26.   
  27.     public void onSumResult(int result) {  
  28.         Toast.makeText(this,"received result:"+result,Toast.LENGTH_SHORT).show();  
  29.     }  
  30. }  
这里主要做了两件事： 
第一，通过addJavascriptInterface注入MyActivity对象，以便JS访问其中的函数
[java]  view plain  copy
  1. mWebView.addJavascriptInterface(this, "android");  
第二：供JS调用，以返回结果的函数onSumResult():
[java]  view plain  copy
  1. public void onSumResult(int result) {  
  2.     Toast.makeText(this,"received result:"+result,Toast.LENGTH_SHORT).show();  
  3. }  

3、JAVA中如何得到JS中的返回值(Android4.4之后)

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例
先写一个具有返回值的js方法
[html]  view plain  copy
  1. function getGreetings() {  
  2.  return 1;   
  3. }  
java代码时用evaluateJavascript方法调用:
[java]  view plain  copy
  1. private void testEvaluateJavascript(WebView webView) {  
  2.    webView.evaluateJavascript("getGreetings()", new ValueCallback() {  
  3.        @Override  
  4.        public void onReceiveValue(String value) {  
  5.            Log.i(LOGTAG, "onReceiveValue value=" + value);  
  6.        }  
  7.    });  
  8. }  
从上面的用法中很明显看到，通过evaluateJavascript调用JS中的方法，可以向其中添加结果回调，来接收JS的return值。 
注意：
  • 上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
  • evaluateJavascript方法必须在UI线程（主线程）调用，因此onReceiveValue也执行在主线程。
好了，这篇文章中有关WebView的知识就先到这，下篇继续讲。下面给大家讲讲有关jadx-gui反编译的知识。

四、jadx-gui反编译

在遇到jadx-gui反编译之前，都是使用apktools进行反编译的，apktools有些是反编译不出来的，而且……难用…… 
想知道jadx-gui有多强？它都可以反编译淘宝、微信代码，是不是够强了。下面我们就来看看它是如何反编译的;

1、下载、配置

jadx-gui是开源的，项目地址：《 https://github.com/skylot/jadx》 
mac电脑： 
打开终端，切到某个路径下，输入以下命令：
[java]  view plain  copy
  1. git clone https://github.com/skylot/jadx.git  
  2. cd jadx  
  3. ./gradlew dist  
其实这里只是做了两个动作：
第一，使用git命令将 项目clone下来（这里需要配置git环境，如果没有，请先搜资料配置git环境，然后再来）
然后，执行jadx目录 下gradlew脚本，这个是shell脚本
windows电脑：
[java]  view plain  copy
  1. git clone https://github.com/skylot/jadx.git  
  2. cd jadx  
  3. gradlew.bat dist  
在windows电脑中，步骤与mac是一样的，只是最后一步中，已经不再是./gradlew所对应的shell脚本了，而是windows平台上的bat脚本。 
可见作者有多牛X，shell脚本和bat脚本都会写，真是屌的不能直视

整个编译过程是比较慢的，这里需要耐心等待下。因为目前会使用gradle 2.7来编译项目，如果没有在环境变量中环境gradle 2.7的环境变量，会自己下载gradle 2.7 
编译成功后会打出BUILD SUCCESS字样，如下图所示：

在编译成功后，在jadx目录下，会生成一个build目录，其中包含jadx目录和一个jadx-xxx-dev.zip的打包文件。在build/jadx目录下，就是源码编译出的jadx工具及所用jar包。jadx-xxx-dev.zip解压后的内容与build/jadx内容一样，只是将其打包了一下而已，方便移值，可见作者有多用心。build目录结构如下图所示：


2、开始反编译

等完毕后,可以开始了,我就介绍个最简单最常用的用法 
（1）、把apk改成zip 
（2）、解压zip获取class.dex文件 
（3）、将class.dex文件放到jadx目录下

[plain]  view plain  copy
  1. cd build/jadx/  
  2. bin/jadx -d out classes.dex  # 反编译后放入out文件夹下(如果out不存在它会自动创建)  
  3. #or  
  4. bin/jadx-gui classes.dex  # 会反编译,并且使用gui打开  
目录结构图如下：

在使用jadx-gui反编译时，左下角会显示当前反编译的进度：

在反编译完成后，在左侧就可以看到目录结构和对应的代码，目录结构中显示的a,b,c,d这些字母是由于在生成apk时使用proguard混淆造成的，proguard混淆的类名是没办法反编译出对应的原类名的，这也是反编译代码中比较蛋疼的地方，下面给大家演示下结果：（还可以通过点击搜索按钮，搜索其中的代码）


有关jadx-gui工具的更多用法，只有靠大家自己去研究啦，到这里我们的源码就已经反编译出来了。 

反编译工具和微信的Classes文件，会在源码中给出大家
这篇文章到这里就结束啦，下篇将会给大家讲解WebViewClient的知识。

如果本文有帮到你，记得加关注哦

源码下载地址：http://download.csdn.net/detail/harvic880925/9526801

请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/51464687 谢谢

简单专注
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客《 WebView使用详解（一）——Native与JS相互调用（附JadX反编译）》对应源码
05-21
博客《 WebView使用详解（一）——Native与JS相互调用（附JadX反编译）》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/51464687
android 向js传递参数,《成为大前端》系列 4.4 Native与JS通信-参数传递和结果返回(Android)...
weixin_31504783的博客
05-26 242
JS 传递参数到 Native前面完成了 JS 调用 Native，接下来继续 JS 如何传递参数到 Native传递原始类型数据先看 JS 端的代码：function onClickButton(){window.androidBridge.callNative("Hello");}复制代码Native 端：inner class BridgeObject{@JavascriptInterfac...
JS 和 Native 互相调用方式
yangwubolwg的博客
06-26 6389
一、网页JS调用Native中java代码 网页和本地代码的交互主要是通过webview这个桥梁来进行的，webview中的如下接口： 接口中的第一个参数object, 为注入webview的java对象 第二个参数name， 为暴露给javaScript使用的名字。 即通过该接口给webview注入一个object对象，然后javaScript可以通过name来引用ob...
Android控件十五：WebView使用（一）：Native与JS相互调用
zk的博客
04-23 554
原文：https://blog.csdn.net/harvic880925/article/details/51464687 一、基本用法 1、加载在线URL void loadUrl(String url) 如： mWebView.loadUrl(“http://www.baidu.com”); 这个函数主要加载url所对应的网页地址，或者用于调用网页中的指定的JS方法,但有一点必须注意的是：l...
Android WebView的使用方法及与JS 相互调用
08-29
主要介绍了Android WebView的使用方法及与JS 相互调用的相关资料,WebView 是 Android 中一个非常实用的组​件， WebView 可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用,需要的朋友可以参考下
Android WebView使用方法详解 附js交互调用方法
01-05
目前很多Android app都内置了可以显示web页面的界面，会发现这个界面一般都是由一个叫做WebView的组件渲染出来的，学习该组件可以为你的app开发提升扩展性。 先说下WebView的一些优点： –可以直接显示和渲染web页面...
详解Flutter WebView与JS互相调用简易指南
01-04
WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。 开始之前先简单了解...
webview的javascript与Native code交互
weixin_30600197的博客
05-22 155
http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页，其中需要网页和native方法有交互，搜索到一篇文章，转发分享一下： =================================================================================================...
Android使用WebView与Native交互的三种方式 ( 附源码 )
XJ200012的博客
06-14 1582
此文章记录了JS与原生交互的几种方式，以及使用方法。 附上了源代码。 最后再总结了在使用WebView时遇到的错误和解决经历
Android WebView与Native通信总结
最新发布
2401_83621384的博客
03-18 712
在上面我们已经基于方案完成了native与WebView间通信机制的实现，双方可以交换数据，但开发的时候需要考虑更多问题。比如，如果是Javascript向native发送数据，需要将数据转换成一个字符串，然后再将字符串发给native, native再去解析这个字符串，找到对应的处理方法，提取出相关的业务参数，再进行相应的处理。所以我们需要定义这个字符串的数据结构。在上面我们已经约定了，H5端可以采用向native发送数据，该方法只有一个字符串参数, 以获取用户信息这个业务功能为例，我们的字符串参数是。
揭开WebView神秘的面纱系列（二）之Native与WebView的通信
QStack的博客
08-28 686
前言 揭开WebView的神秘面纱系列（一）之WebView简介我们已经简单介绍了WebView，WebViewClient等几个常用的类和方法。今天我们也将用到这些方法，在webview发展之初更多的是用于信息展示，没有过多的交互，然而随着Hybrid方案越来越火热，与页面交互的需求越来越多，在某些场景下更是需要调用Native的API，例如打开摄像头，这是web页面无法单独完成，需要调用系统API。由此，Web页面与Native的通信就成了无法回避的问题，那么今天我们就来探索一下Native是如何与we
酷炫实现WebView与Native完美融合
李彬博客专栏
02-16 6191
前言首先看个效果图： 这里背景是native的，左侧边栏也是native的，右侧内容是透明web页面，是不是很酷炫的样子，而且我们还可以自己加蒙版背景，是不是很酷。 这个场景非常适合左侧目录是本地的，然后内容是加载web页面，这样可以实时跟新内容，而且不会像纯h5那样尴尬。 跟多场景小伙伴可以自己挖掘，只是提供一个思路。 实现步骤 1.web页面设置透明（opacity） 2.安卓
WebView使用详解
狂健小夫的博客
11-19 2908
文章目录WebSettingsWebClientWebChromeClientWebView与原生代码的交互Java-&amp;gt;JSloadUrlevaluateJavascriptJS-&amp;gt;Java通过 WebView 的 addJavascriptInterface() 方法通过WebViewClient 的shouldOverrideUrlLoading()方法回调通过WebChromeC...
Android WebView使用总结
u013914309的博客
06-30 2849
#.简介： WebView是Android提供的用来展示展示web页面的View，内部使用webkit浏览器引擎（一个轻量级的浏览器引擎），除了展示Web页面外，还可与Web页面内的JS脚本交互调用。WebView内部的WebSetting对象负责管理WebView的参数配置； WebViewClient负责处理WebView的各种请求和通知事件，在对应事件发生时会执行WebViewClient的对应回调； ChromeWebviewClient辅助Webview处理与JS一些交互......
Android Native APP开发笔记：使用WebView控件加载网页
Naisu的各种笔记
10-17 4123
WebView是一个比较常用的控件，功能上也比较单一，就是用来加载网页的，可以加载远程的网页，也可以加载本地网页文件。简单来说就相当于一个浏览器。这篇文章将对WebView使用相关内容做个简单记录。
js调用android播放器,Native.js调用android原生播放video视频MUI
weixin_36132709的博客
05-26 531
Native.js调用android原生播放video视频MUI写一个统一的播放器样式00:00/00:00HTML5有video标签，iOS可以直接用。Android上video标签不流畅，可以通过5+来解决。本地视频可以使用plus API调用本地应用播放：plus.runtime.openFile()网络视频可以通过native.js调用document.addEventListener( ...
WinFrom、C# 学习记录四 WebView2使用记录
热门推荐
学以致用 知行合一
08-20 1万+
Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本机应用中显示 web 内容。看到网络上有讨论使用可以WebView2替代Electron，不过看目前的微软官方的WebView2 路线图，UWP 预览版/MacOS 预览版/Xbox 预览版/HoloLens 预览版/Linux 预览版都在计划中，那就是说目前还无法跨平台。
webview与native通信
05-10
JavaScript Bridge 可以让 JavaScript 在 Webview 中调用 Native 的方法，同时也可以让 Native 在 Webview 中执行 JavaScript 代码。 2. URL Scheme：可以通过 URL Scheme 在 Webview 和 Native 之间进行单向通信。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值