时间:2021-05-21
需求背景:
需要在用户点击提交按钮的时候拦截用户提交的数据。
遇到的问题:
1.页面不是自家前端做的,不能修改网页中的代码
2.要拦截的请求不是get请求,而是一个post请求 (难点在于:如果拦截的请求是get请求的话,我只需要拿到url,将后面拼接的参数键值对取出来就好了,但是post请求的参数键值对我们是看不到的。。。)
解决重点:
重写webViewClient的shouldInterceptRequest这个方法
1.这个方法是API21以后才出现的,还有一个过时的方法也要重写,不要忘了!
2.在加载网页时,所有的资源都会经过shouldInterceptRequest这个方法,我们可以通过shouldInterceptRequest和抓包工具(Fidder,Charles)去获取你想要获取信息的网址和资源文件
3.这个方法是执行在子线程的,如果你想要更新UI的话,记得切换线程
解决方案:
我这里找到了两种解决方案(总有一款适合你)
方案A : 适合 精通js 的大大们
1.拦截页面上按钮的点击事件,将点击事件的操作进行替换
$('#J_submit').off('click'); //1.将id为J_submit的按钮点击事件关闭$('#J_submit').on('click',function(){ //2.将id为J_submit的按钮点击事件重新打开,并执行function里的内容 if ($(this).hasClass("btn-disabled")) { // ----- 此处为原页面代码,不做解释 ----- return; } try { trackDealerEvent('dlr_order_page_form_submit_click', { 'esfrom': _mediaId, 'business': 'songshu', 'series': _seriesId, 'city': _cityId }); } catch (e) { console.log(e); } // ----- 此处为原页面代码,不做解释 ----- var pageFormData = validateAllField(alertDiv); if (pageFormData) { //3.获取到页面内的数据 $.ajax({ //4.ajax方式上传到服务器中 url: 'https://gouche.jxedt.com/gouche/clue/submit', data: { cityid: _cityId, brandid: _brandId, seriesid: _seriesId, classesid: _specId, name: $("[name='userName']").val(), phone: $('#phoneNumber').val(), type: 4 } }); postOrder(pageFormData); }})2.动态的加载一段js代码
mCommonWebView.setCommonWebViewClient(new CommonWebViewClient() { //添加自定义的 WebViewClient @Override public void onPageFinished(WebView view, String url) { //重写onPageFinished方法 super.onPageFinished(view, url); //请求js的网址 runRemoteJs(Constant.QueryCarPrice.loadJsUrl_CarHome); } private void runJs(String remoteJs){ //把获取到的js代码添加到当前网页 if(TextUtils.isEmpty(remoteJs)) { return; } String js = "javascript:"; //作用:指明字符串后面的都是js代码 js+= "var script = document.createElement('script');"; // 作用:创建script节点 js+= "script.type = 'text/javascript';"; js+=remoteJs; mCommonWebView.callJsFunction(js); //加载js代码 } private void runRemoteJs(String url) {//前端大大提供的一个网址,网址里面就是上面的js代码,将网页中的代码获取下来 RxRequest<String> request = new RxRequest<String>() .setUrl(url) .setMethod(Request.Method.GET); RxHttpEngineWrapper.commonExec(request) .subscribeOn(AndroidSchedulers.mainThread()) .subscribe(new UtilsRx.DefaultSubscriber<String>(){ @Override public void onNext(String s) { runJs(s); } }); }});3.到时候只要前端的大大修改页面中的js就可以了
此方案的坑:
1.要加载的js代码中不能包含script节点
2.要加载的js代码中不能有注释
3.要加载的js代码一定要加上分号
*如果不满足上面的三点要求,要加载的js都不能正确的执行
方案B : 原生的Android方式,相对于上一种方案,这种方案比较麻烦
1.重写shouldInterceptRequest去拦截资源
2.将第三方网页上进行网络请求的js页面下载下来(就是把网页的所有下载下来,找到进行网络请求的js页),对js页进行修改
3.将处理好的js页加载到本地,以后加载时就利用本地的js替换第三方的js(我会在本地的js页面中添加与webview沟通的桥梁)
//以下为具体操作,我把具体的方法贴了上去,如果不太懂的可以看看代码,我写了注释 //初始化WebViewprivate void initWebView() { mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setDefaultTextEncodingName("utf-8"); if(Build.VERSION.SDK_INT >=21){//Added in API level 21 mWebView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); } mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setUseWideViewPort(true); //设置webview推荐使用的窗口,使html界面自适应屏幕 mWebView.getSettings().setLoadWithOverviewMode(true); mWebView.getSettings().setGeolocationEnabled(true); mWebView.getSettings().setAllowFileAccess(true); if (Build.VERSION.SDK_INT >= 16) { //屏蔽Webview的跨域漏洞 mWebView.getSettings().setAllowFileAccessFromFileURLs(false); mWebView.getSettings().setAllowUniversalAccessFromFileURLs(false); } mWebView.getSettings().setPluginState(WebSettings.PluginState.ON); if (Build.VERSION.SDK_INT >= 11) { mWebView.getSettings().setAllowContentAccess(true); } mWebView.loadUrl(currUrl); mWebView.setWebViewClient(new MyWebViewClient()); //与js通讯的桥梁 mWebView.addJavascriptInterface(new StubClass(),"stub"); } public class MyWebViewClient extends WebViewClient { @Override public WebResourceResponse shouldInterceptRequest(WebView view, String url) { //获取的请求参数的 Map 集合 HashMap<String,String> params; Uri uri=Uri.parse(url); //获取网址对应的Uri if (rightUrl(uri.toString())) { params=paramForGET(uri); /* * 获取post请求参数的思路就是: * 找到其网址中进行网络请求的js代码,对这段js代码进行替换 * 我采取的是拦截第三方网址上请求数据的js资源,将本地的资源提交上去替换原资源 */ if (uri.toString().contains("index.js")) { //拦截该网页下对应的js资源并进行替换 try { //WebResourceResponse的构造器三个参数作用 String mimeType:指定替换资源的类型 String encoding:字符集 InputStream input:输入流 return new WebResourceResponse("application/x-javascript","UTF-8",getAssets().open("index.js")); } catch (IOException e) { e.printStackTrace(); } } } return super.shouldInterceptRequest(view, url); } //API21及21以后才支持此方法 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) @Override public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { //获取的请求参数的 Map 集合 HashMap<String,String> params; String method=request.getMethod(); //当前网址的提交方式 Map<String, String> requestHeaders = request.getRequestHeaders(); //获取请求头 Uri uri=request.getUrl(); //获取网址对应的Uri if (rightUrl(uri.toString())) { params=paramForGET(uri); /* * 获取post请求参数的思路就是: * 找到其网址中进行网络请求的js代码,对这段js代码进行替换 * 我采取的是拦截第三方网址上请求数据的js资源,将本地的资源提交上去替换原资源 */ if (uri.toString().contains("index.js")) { //拦截该网页下对应的js资源并进行替换 try { //WebResourceResponse的构造器三个参数作用 String mimeType:指定替换资源的类型 String encoding:字符集 InputStream input:输入流 return new WebResourceResponse("application/x-javascript","UTF-8",getAssets().open("index.js")); } catch (IOException e) { e.printStackTrace(); } } } return super.shouldInterceptRequest(view, request); } private boolean rightUrl(String url){ if (url.contains(COLLECT_URL)) //判断资源网址是否是我需要的 return true; return false; } private HashMap<String,String> paramForGET(Uri uri){ HashMap<String,String> params=new HashMap<>(); Set<String> paramNames = uri.getQueryParameterNames(); //获取此get请求中所有的参数名 for (String param : paramNames) { params.put(param,uri.getQueryParameter(param)); //存储键值对 } return params; }} public class StubClass{ @JavascriptInterface public void getData(String json){ Log.i("xxx","json -> "+json); }}这是我本地的js,对原来的js进行了修改,添加了与Android通讯的桥梁,来截取数据。
补充知识:android WebView使用Post请求和设置浏览器弹框
这里要注意:post请求参数只能传byte数组,而且必须是键值对字符串形式的byte数组,其中的key是后台服务器接收key,后台规定key是什么值就是什么值,不能随意更改,没有key=value格式或者key不正确,都会请求不到数据网页打不开。
下面代码直接看initWebView()方法就好
以上这篇Android WebView通过动态的修改js去拦截post请求参数实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
下面通过一段代码给大家介绍Vueaxios全局拦截get请求、post请求、配置请求,具体代码如下所述:Titleaxios插件讲解Get请求Post请求htt
详解Retrofit动态参数(非固定参数、非必须参数)(Get、Post请求)关键词:Retrofit动态参数、非固定参数、非必须参数有如下场景:请求数据时:1
1.android中利用webview调用网页上的js代码。Android中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webvie
二次封装axios,根据参数来实现多个请求多次拦截1.新建axiosTool.js文件,设置请求拦截和处理的逻辑importVuefrom'vue'import
本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法。分享给大家供大家参考,具体如下:Angularjs中,$http以post在