您的位置：首页 > 移动开发

webView 与 Android交互详解

2017-07-31 22:05 405 查看

一： webView相关知识：

1 WebView是一个基于webkit引擎、展现web页面的控件。2 常用类及方法：

 WebSettings类,对WebView进行配置和管理

webView.onResume() ；webView.onPause()；Webview.goBack()Webview.goForward()

WebViewClient类,处理各种通知,请求事件

shouldOverrideUrlLoading() 所有加载都经过这个方法,划重点，很重要。onPageStarted()onPageFinished()onLoadResource() 每一个资源（比如图片）的加载都会调用一次。

WebChromeClient类.辅助 WebView 处理 Javascript 

onProgressChanged（）用于显示加载进度onReceivedTitle（） 获取Web页中的标题 

二： 如何与JS代码进行交互

1 Android和JS代码通过WebView控件进行交互。

2 Android如何与JS交互？

1.1 通过WebView的loadUrl（）

调用流程如下：将需要调用的JS代码以.html格式放到src/main/assets文件夹里在JS代码中声明供Android调用的方法。在Android里通过WebView设置调用JS代码
WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);mWebView.loadUrl("file:///android_asset/javascript.html");//此处load的url即位放在本地的html文件button.setOnClickListener(new View.OnClickListener(){public	void onClick(View v){mWebView.post(new Runnable(){public void run() {//此处要注意，方法名必须与.html中相同。mWebView.loadUrl("javascript:callJS()");}}}}
1.2 通过WebView的evaluateJavascript（）
优点：该方法比第一种方法效率更高、使用更简洁。代码如下：
mWebView.evaluateJavascript（"javascript:callJS()",new ValueCallback<String>() {public void onReceiveValue(String value) {//处理js返回结果}}
3 JS如何与Android交互？3.1 通过WebView的addJavascriptInterface（）实现步骤：步骤1：定义一个与JS对象映射关系的Android类：AndroidtoJsAndroidtoJs.java
// 继承自Object类public class AndroidtoJs extends Object {// 定义JS需要调用的方法// 被JS调用的方法必须加入@JavascriptInterface注解@JavascriptInterfacepublic void hello(String msg) {System.out.println("JS调用了Android的hello方法");}}
1234567891012345678910步骤2：将需要调用的JS代码以
.html
格式放到src/main/assets文件夹里需要加载JS代码：javascript.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Carson</title><script>function callAndroid(){// 由于对象映射，所以调用test对象等于调用Android映射的对象test.hello("js调用了android中的hello方法");}</script></head><body>//点击按钮则调用callAndroid函数<button type="button" id="button1" onclick="callAndroid()"></button></body></html>
1234567891011121314151617181912345678910111213141516171819步骤3：在Android里通过WebView设置Android类与JS代码的映射详细请看注释
public class MainActivity extends AppCompatActivity {WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = mWebView.getSettings();// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 通过addJavascriptInterface()将Java对象映射到JS对象//参数1：Javascript对象名//参数2：Java对象名mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象// 加载JS代码// 格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.html");
3.2 通过WebViewClient 的shouldOverrideUrlLoading ()实现步骤：具体原理： Android通过 
WebViewClient
 的回调方法
shouldOverrideUrlLoading()
拦截 url解析该 url 的协议如果检测到是预先约定好的协议，就调用相应方法 即JS需要调用Android的方法具体使用： 步骤1：在JS约定所需要的Url协议 JS代码：javascript.html以.html格式放到src/main/assets文件夹里
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Carson_Ho</title><script>function callAndroid(){/*约定的url协议为：js://webview?arg1=111&arg2=222*/document.location = "js://webview?arg1=111&arg2=222";}</script></head><!-- 点击按钮则调用callAndroid（）方法  --><body><button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button></body></html>
12345678910111213141516171819201234567891011121314151617181920当该JS通过Android的
mWebView.loadUrl("file:///android_asset/javascript.html")
加载后，就会回调
shouldOverrideUrlLoading（）
，接下来继续看步骤2：步骤2：在Android通过WebViewClient复写
shouldOverrideUrlLoading （）
MainActivity.java
public class MainActivity extends AppCompatActivity {WebView mWebView;//    Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = mWebView.getSettings();// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 步骤1：加载JS代码// 格式规定为:file:///android_asset/文件名.htmlmWebView.loadUrl("file:///android_asset/javascript.html");// 复写WebViewClient类的shouldOverrideUrlLoading方法mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {// 步骤2：根据协议的参数，判断是否是所需要的url// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）//假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）Uri uri = Uri.parse(url);// 如果url的协议 = 预先约定的 js 协议// 就解析往下解析参数if ( uri.getScheme().equals("js")) {// 如果 authority  = 预先约定协议里的 webview，即代表都符合约定的协议// 所以拦截url,下面JS开始调用Android需要的方法if (uri.getAuthority().equals("webview")) {//  步骤3：// 执行JS所需要调用的逻辑System.out.println("js调用了Android的方法");// 可以在协议上带有参数并传递到Android上HashMap<String, String> params = new HashMap<>();Set<String> collection = uri.getQueryParameterNames();}return true;}return super.shouldOverrideUrlLoading(view, url);}});}
三： 实际开发中的坑：
1：在Android中调用JS代码的时候，webView.Post方法必须在子线程中进行开启。2：预防addJavascriptInterface（）漏洞4.2以下系统使用@addJavascriptInterface注解3：防止WebView内存泄漏使用getApplicationContext在Activity使用完毕之后记得销毁4：记得添加网络权限
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航