Android中使用WebView与JS交互全解析

Posted 2020-08-21

　　1.概述首先，需要提出一个概念，那就是hybrid，主要意思就是native原生android和h5混合开发。为什么要这样做呢？大家可以想象一下针对于同一个活动，如果使用纯native的开发方式，Android和ios两边都要维护同一套界面甚至是逻辑，这样开发和维护的成本会很大，而使用hybrid的开发方式的话，让前端的同学去写一套界面和逻辑，对于native端来说只要使用对应的容器去展示就可以了(对于Android来说这个容器当然就是WebView)。那为什么不所有的页面都使用这种方式开发呢？因为使用h5来展示界面的话用户体验始终是不如native的，所以在这两者之间我们需要一个权衡。
　　
　　介绍完了何为hybrid，我们来思考下面几个场景:场景1:前端那边的页面有一个按钮，点击这个按钮需要显示一个native的组件(比如一个toast)，或者点击这个按钮需要去在native端执行一个耗时的任务。
　　
　　场景2:还是前端页面有一个按钮，点击这个按钮的逻辑是：如果登录了，则跳转到相应的界面，如果没有登录，则跳转到登录界面。而这个登录界面是我们native维护的。
　　
　　看完上面两个场景，相信大家也发现了一个问题，hybrid这样的开发方式有一个问题需要解决，那就是前端和本地的通信。
　　
　　下面将会给大家介绍active原生Android和h5之间的通信方式。
　　
　　2.如何使用使用WebView控件 与其他控件的使用方法相同 在layout中使用一个”WebView”标签不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页在WebView中加载Web页面，使用这里写图片描述注意在ma www.sratchina.com nifest文件中加入访问互联网的权限：11但是，在Android中点击一个链接，默认是调用手机上已经安装的浏览器程序来启动，因此想要通过WebView代为处理这个动作 ，那么需要通过这里写图片描述当然，我们也可以写一个类继承WebViewClient来对WebViewClient对象进行扩展这里写图片描述然后只需要将setWebViewClient的内容进行修改即可这里写图片描述另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录，因此需要覆盖系统的回退键 goBack，goForward可向前向后浏览历史页面这里写图片描述例子1：WebViewClient的使用布局代码activity_main.xml：10.
　　
　　15.
　　
　　12345678910111213141516171234567891011121314151617代码：2.
　　
　　4.
　　
　　9.
　　
　　获取webview控件设置使用webview加载页面16.
　　
　　18.
　　
　　24.
　　
　　30.
　　
　　35.
　　
　　37.
　　
　　39.
　　
　　覆盖系统的回退键47.
　　
　　50.
　　
　　12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152531234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253和java的相互调用用处非常大,通过可以使用Android原生的javascriptInterface来进行js和Java的通信。
　　
　　例子2：JavaScript和java的相互调用首先我们写一段html代码：5.
　　
　　9.
　　
　　20.
　　
　　123456789101112131415161718192021www.boyuanyl.cn2223242512345678910111213141516171819202122232425这是一个很简单的HTML5页面，里面有一个button，点击这个button就执行js脚本中的showToast方法。
　　
　　这里写图片描述那么这个showToast方法做了什么呢？
　　
　　这里写图片描述可以看到control.showToast，这个是什么我们后面再说，下面看我们Android工程中的java代码。
　　
　　编写布局文件布局的内容很简单，就是嵌套一个WebView控件这里写图片描述编写MainActivity.java代码2.
　　
　　13.
　　
　　15.
　　
　　17.
　　
　　获取webview控件获取WebView的设置将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的给webview添加JavaScript接口通过webview加载html页面32.
　　
　　42.
　　
　　46.
　　
　　1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515212345678910111213141516171819202122232425262728www.gouyily.cn29303132333435363

www.boshenyl.cn

7383940414243444546474849505152上面的代码主要做了以下的步骤：a) 获取webview控件b) 获取webview的设置，将JavaScript设置为可用，打开JavaScript的通道这里写图片描述c) 在Android程序中建立接口 ，并编写相关逻辑再去看之前js脚本中的那个showToast()方法这里写图片描述这里的control就是我们的那个interface，调用了interface的show方法，很明显这里是js调用了Android的代码，输出了一个这里写图片描述可以看到这个interface我们给它取名叫control，最后通过loadUrl加载页面。
　　
　　这里写图片描述可以看到先显示一个toast，然后调用log()方法，log()方法里调用了js脚本的log()方法, js的log()方法做的事就是在控制台输出msg,这里明显是Android调用了js的方法。
　　
　　这里写图片描述d) 给webview添加我们自己编写的JavaScript接口通过WebView的addJavascriptInterface方法去注入一个我们自己写的interface。
　　
　　这里写图片描述e) 使用webview控件加载我们之前编写的html文件这里写图片描述在真实手机上运行程序，在控制台成功输出内容:这里写图片描述这样我们就完成了js和java的互调，是不是很简单。
　　
　　中处理JS的警告，对话框等在Android中处理JS的警告，对话框等需要对WebView设置WebChromeClient对象,并复写其中的onJsAlert，onJsConfirm，onJsPrompt方法可以处理javascript的常用对话框例子3：在Android中处理javascript的对话框1) 编写html页面布局分别测试javascript的三种对话框这是一个警告对话框！");更多信息请到我的博客去？"))
　　
　　你选择了不去！");演示一个带输入的对话框","这里输入你的信息");谢谢使用，你输入的是：下面我们演示3种对话框</p>警告、提醒对话框</p>提交带选择的对话框</p>提交要求用户输入的对话框</p>提交1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484912345678910111213141516171819202122232425262728293031323334353637383940414243444546474849页面效果：这里写图片描述中布局的编写请输入网址"/>连接" />123456789101112131415161718192021222324252627282930313212345678910111213141516171819202122232425262728293031323) 编写自定义对话框的布局新建prom_dialog.xml文件，在其中自定义一个带输入的对话框由TextView和EditText构成12345678910111213141516171819123456789101112131415161718194) 获取WebView控件，并进行相关的设置这里写图片描述5) 复写onKeyDown方法，当用户按返回键时，返回上一个加载的页面这里写图片描述6) 给WebView设置setWebChromeClient，并复写其中的方法设置3.
　　
　　处理javascript中的构建一个Builder来显示网页中的对话框提示对话框");14.
　　
　　点击确定按钮之后,继续执行网页中的操作25.
　　
　　30.
　　
　　36.
　　
　　38.
　　
　　40.
　　
　　处理javascript中的带选择的对话框");65.
　　
　　处理javascript中的为网页中对话框的提示内容在没有输入时，默认显示的内容自定义一个带输入的对话框由TextView和EditText构成77.
　　
　　设置TextView对应网页中的提示信息设置EditText对应网页中的输入框构建一个Builder来显示网页中的对话框设置弹出框标题带输入的对话框");设置弹出框的布局设置按键的监听93.
　　
　　97.
　　
　　点击确定之后，取得输入的值，传给网页处理104.
　　
　　106.
　　
　　109.
　　
　　117.
　　
　　126.
　　
　　设置网页加载的进度条133.
　　
　　139.
　　
　　142.
　　
　　取得编辑框中我们输入的内容判断输入的内容是不是网址装载网址