首页 > 其他分享 >native <-互相调用-> js

native <-互相调用-> js

时间:2022-09-01 19:58:44浏览次数:78  
标签:调用 js JS WebView articleContentWebView native

WebView

WebView 提供了这些方法

- 提供了这些方法


```
addJavascriptInterface
canGoBack
canGoBackOrForward
canGoForward
capturePicture
clearCache
clearFormData
clearHistory
clearSslPreferences
clearView
destroy
disablePlatformNotifications
documentHasImages
enablePlatformNotifications
findAddress
getContentHeight
getFavicon
getHttpAuthUsernamePassword
getProgress
getScale
getTitle
getUrl
getZoomControls
goBack
goBackOrForward
goForward
invokeZoomPicker
loadData
loadDataWithBaseURL
loadUrl
overlayHorizontalScrollbar
overlayVerticalScrollbar
pageDown
pageUp
pauseTimers
reload
requestFocusNodeHref
requestImageRef
resumeTimers
savePassword
setDownloadListener
setHorizontalScrollbarOverlay
setHttpAuthUsernamePassword
setInitialScale
setVerticalScrollbarOverlay
setWebChromeClient
setWebViewClient
stopLoading
zoomIn
zoomOut
```
# 1 SetWebViewClient和 SetWebChromeClient的区别

仅仅是渲染一个HTML网页,只需要用setWebViewClient就可以了,但是如果要处理比较复杂的事务,就考虑用setWebChromeClient辅助WebView处理JavaScript的对话框,网站图标,网站title,加载进度等.

https://blog.csdn.net/u014473112/article/details/52176412

WebChromeClient


WebView articleContentWebView = new WebView(this);
articleContentWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

WebViewClient

WebView articleContentWebView = new WebView(this);
articleContentWebView.setWebChromeClient(new WebChromeClient(){
  @Override
  public void onProgressChanged(WebView view, int newProgress) {
    super.onProgressChanged(view, newProgress);
  }
});

2 native 调用 js

网页JS供java调用的代码

<script type="text/javascript">
  function funWithoutParam(){
		document.getElementById("appId").innerHTML = "native 调用 js"
  }
  function funWithParam(param){
		document.getElementById("appId").innerHTML = "native 调用 js 的参数: " + param
  }
</script>

java 端的代码

WebView webView = new WebView(this);
articleContentWebView.getSettings().setJavaScriptEnabled(true);

Button = btn = findViewById(R.id.btn);
btn.setOnCLickListener((View v)->{
	webView.loadUrl("javascript:funWithoutParam");
  String param = "native param"
	webView.loadUrl("javascript:funWithoutParam(" + param + ")");
});

//articleContentWebView.loadDataWithBaseURL(null,"ture HTML DOCS","text/html","UTF-8",null);
//articleContentWebView.loadData("ture HTML DOCS","text/html","UTF-8");

Webview 对象通过 loadUrl 接口来加载以 javascript 协议头的方式,就可以调用JS中定义的接口了。

3 js 调用native

java 端代码

WebView webView = new WebView(this);
// 启用js
wenView.getSettings().setJavaScriptEnabled(true); 
// 加载本地网页 ture HTML DOCS
articleContentWebView.loadData("ture HTML DOCS","text/html","UTF-8");
// 注入对象
mMCWebInterface = new MCWebInterface(activity, webview);  
webview.addJavascriptInterface(mMCWebInterface, "MCWebInterface");
  • mMCWebInterface: 供给 js 调用的对象

  • "MCWebInterface": js 调用 native 对象时使用的名字

网页 js 端代码

<div>
	<button onClick="window.MCWebInterface.invokeStart('this is param')">
  	点击调用 native 代码
  </button>
</div>

4 注意

需要注意的是在Android4.2之前addJavascriptInterface接口存在注入漏洞,即JS可以通过反射获取到native端的其他接口,进行其他非法操作,所以4.2之后升级增加了JS只能访问带有 @JavascriptInterface注解的Java函数的限制,在本地定义的提供给JS调用的接口都需要增加@android.webkit.JavascriptInterface声明。

直接让小于4.2版本的系统不起作用

@SuppressLint("JavascriptInterface")
@Override
public void addJavascriptInterface(Object object, String name) {
  if (Build.VERSION.SDK_INT >= 17) {
    super.addJavascriptInterface(object, name);
  }
}

供给JS调用的接口增加@JavascriptInterface声明。

在本地定义的提供给JS调用的接口都需要增加@android.webkit.JavascriptInterface声明。

标签:调用,js,JS,WebView,articleContentWebView,native
From: https://www.cnblogs.com/sunupo/p/16647567.html

相关文章

  • 2022-8-31 jsp el表达式
    jsp<%--JSP脚本片段:用于在JSP页面写java代码--%>注意:1、JSP脚本片段中只能出现java代码,不能出现HTML元素。在 访问JSP时,JSP引擎翻译JSP页面中的......
  • 【js与native通信】1 通信协议制定
    通过native<-互相调用->js知道WebView有一个方法setWebChromeClient,可以设置WebChromeClient对象。而WebChromeClient对象中有三个方法,分别是onJsAlert......
  • js 实现冒泡排序及优化方案
    //冒泡排序//原理就是每一轮循环,将一个最大的值放冒泡到最后//1.每一趟都是比较相邻两个元素,如果后一个元素大于前一个,则交换两个元素//2.第一趟从第一个元素开始......
  • 人均瑞数系列,瑞数 5 代 JS 逆向分析
    声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切......
  • JS 事件盘点
    1.鼠标事件鼠标在元素上移动mousemove鼠标从该元素上移出mouseout鼠标移动到该元素mouseover鼠标点击(单击)click鼠标双击dbclick鼠标右击contextmenu可以配......
  • 生成二维码并以图片格式下载-qrcodejs2
    1、安装qrcodejs2npminstallqrcodejs2--save2、在需要的页面引入importQRCodefrom"qrcodejs2";3、页面中使用<divid="qrcode"ref="qrcode"></div>4......
  • Flask 学习-31.flask_jwt_extended 验证token四种方headers/cookies/json/query_stri
    前言用户携带授权token访问时,其jwt的所处位置列表,默认是在请求头部headers中验证。可以通过JWT_TOKEN_LOCATION进行全局配置,设置token是在请求头部,还是cookies,还是json,......
  • JS缓存三种方法
    1.sessionStorage:临时的会话存储只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面,或者在编辑器中更改了代码,存储的会话信息也不会丢失。2.localStor......
  • vue项目中main.js使用方法详解
    vue项目中main.js使用方法详解目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技......
  • jsp基础语法和指令
    javabeanMVC三层架构filter......