本文目录一览：
- 1、android中webview与js交互
- 2、iOS下webView和JS交互
- 3、如何实现WebView和js页面的交互
- 4、如何处理webview与js之间交互
- 5、WKWebView与JS的交互原理
android中webview与js交互
移动开发中，我们经常会遇到混合开发模式，经常是在移动客户端中增加网页，来减少客户端的压力，同时也让软件更加灵活。废话少说，下面直接进入主题。
webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());
webView.getSettings().setAppCacheEnabled(true);
if (Constant.DEBUG) {
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}
if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) {
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
//参数1 定义Android 与js交互的接口， 参数2 与js交互的一个常量，可以是任意一个常量字符串，
但是h5网页调用的时候需要增加这个参数二：handler
public class JSInterface{
@JavascriptInterface//这个标注必须加上 表示js要调用的方法，可以自动识别
public void getShareInfo(String strings) {
//todo android dosomething
}
}
那么 js端该如何调用这个方法呢\
android 和ios的调用方法不一样 因此 h5里面需要区别andorid和ios机型来分别调用移动端方法
如android：
//handler 是与android 约定的常量（最好做成全局通用的常量）
//getShareInfo 是与android 定义的调用方法
以上常量、方法、参数类型 必须一致才能成功调用
WebView提供两个事件回调类给应用层，分别为WebViewClient,WebChromeClient开发者可以继承
这两个类，接手相应事件处理。WebViewClient 主要提供网页加载各个阶段的通知，比如网页开始
加载onPageStarted，网页结束加载onPageFinished等；WebChromeClient主要提供网页加载过程
中提供的数据内容，比如返回网页的title,favicon等。
有需要监听加载网页进度
//需要webBar的可以自定义增加一个webBar
最后，就是大家都知道的webView.loadUrl(url);//url需要加载的网页
那么，如何在android调用js的方法呢
//getMsg() 为js里面暴露的方法
在销毁的时候：
protected void onDestroy() {\
super.onDestroy();\
if (webView != null) {\
webView.loadUrl(“about:blank”);\
webView.destory();\
}\
}
iOS下webView和JS交互
下面说一下使用方法
申明一个继承于NSObjectt的class, 并实现你的protocol
最后，通过UIWebView的特性，获取JSContext,并将我们的function注入到上下文
看起来很方便吧，app – JS 也很方便
WKWebView关键词
WKUIDelegate 基于JS系统的几个内部方法 实现一下方法要调用对应的completionHandler，否则崩溃
WKScriptMessageHandler 重点来了，这是苹果爸爸推荐使用的JS交互
以我目前的项目为例，我们是将 artproFunc当作了一个通道，所有的function都走message.body分发出来，所以会有switch case 解析 body中的method，然后再进行不同的方法分发。
最近研究JS和iOS native交互，偶然发现的库发现github上用的人也不少,感觉还不错的样子，就研究了下使用方法
看起来很简单的样子
如何实现WebView和js页面的交互
通过webView.addJavascriptInterface(Object, “name”);方法可以实现,其中参数Object表示的是需要与js交互的Java代码所在的类的类名,而参数name则表示js页面用来调用Java代码时的别名.简单来说就是将Java对象和Js对象进行绑定,通过别名可以找到与之关联的Java对象.例如:
如何处理webview与js之间交互
先说说android中webview控件如何调用javascript代码？
其实android中webview控件调用javascript方法还是比较简单，只需要设置webview支持javascript，然后用loadUrl调用javascript方法即可。
javascript调用android中自定义好的方法(例如: 分享)
需要给webview控件添加addJavascriptInterface方法，而这个就类似于初始化一个类对象，以及类对象里的方法。这个类对象就提供给javascript来调用。
javascript调用自定义好的JShare对象。
效果图
WKWebView与JS的交互原理
写的人比较多，自己亲自写一遍，记录一下！
OC和Swift两个版本，原理比较简单，UI如下：
JS准备一个方法
OC: native去调用 videoPlay(videoUrl)
Swift: native去调用网页方法 videoPlay(videoUrl)
比如JS需要调用native的 CallApp 方法，那么在需要调用的地方写法如下：
按照如下的方法初始化 WKWebView ， 调用 addScriptMessageHandler: name 方法，注册 CallApp 方法，如下：
OC:
Swift:
在 webView 的UIDelegate代理中可以拿到响应
OC:
Swift:
感谢您阅读完毕，如有疑问，欢迎添加QQ: 714387953 (蜗牛上高速)。
github :
如果有错误，欢迎指正，一起切磋，共同进步
如果喜欢可以 Follow、Star、Fork ，都是给我最大的鼓励。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243530.html
微信扫一扫 
支付宝扫一扫 