UIWebView与H5交互（JavaScriptCore）
- iOS调用H5的两种方法
(1) WebView直接调用
NSString * jsStr = @"getData";
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];
(2) JSContext调用
引入#import <JavaScriptCore/JavaScriptCore.h>框架
定义 JSContext 属性，在UIWebViewDelegate的代理方法里实现一下代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//首先创建JSContext对象，通过当前的webViewV的键获取到JSContext
self.context = [webView valueForKey:@"documentView.webView.mainFrame.javaScriptContext"];
NSString * jsStr = @"getData";
[self.context evaluateScript:jsStr];
NSLog(@"%s",__func__);
}
⚠️ 如果Vue的方法给原生调用，则需要把方法挂在window下面
created (){
windows.getData = this.getData
},
- H5调用iOS方法
在WebView的webViewDidFinishLoad代理方法利用JSContext给H5注入对象
self.context[@"share"] = ^(){
NSArray * args = [JSContext currentArguments];
for (JSValue * value in args) {
NSLog(@"%@",value.toString);
}
};
在vue中直接用windows.<方法名>调用iOS的方法。
WKWebView与H5交互 （messageHandlers）
- iOS调用vue方法
（1）如果Vue的方法给原生调用，则需要把方法挂在window下面
created (){
windows.getData = this.getData
},
（2）在iOS中调用vue的方法，如下
NSString * jsStr = @"getData";
[self.wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
NSLog(@"返回数据%@----错误%@",data,error);
}];
- vue调用iOS方法
（1）在iOS中遵守WKScriptMessageHandler,定义WKWebViewConfiguration并设置userContentController
@interface WKWebViewViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler>
@end
WKWebViewConfiguration * Configuration = [[WKWebViewConfiguration alloc]init];
// 添加消息处理，注意：self指代的对象需要遵守WKScriptMessageHandler协议，结束时需要移除
[UserContentController addScriptMessageHandler:self name:@"download"];
(2) 在WKScriptMessageHandler协议的代理方法里面根据message.name来判断js是否调用并作出相关的处理，message.body即为js传过来的参数
#pragma mark WKScriptMessageHandler
// 从web界面中接收到一个脚本时调用
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
if ([message.name isEqualToString:@"download"]) {
NSLog(@"%@",message.body);
}
}
vue中调用iOS方法
windows.webkit.messageHandlers.download.postMessage(
{
title:'分享标题'
content：'分享内容'
url：'http://www.baidu.com'
}
)
使用第三方WebViewJavascriptBridge
- iOS项目中引入#import "WebViewJavascriptBridge.h"，并声明
@property WebViewJavascriptBridge * bridge;
把以下代码加入到创建WebView后，加载URL之前
if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:self.wkWebView];
[_bridge setWebViewDelegate:self];
__weak typeof(self) weakSelf = self;
// js调用iOS方法
[self.bridge registerHandler:@"iosDownload" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"----下载成功", data);
}];
// iOS调用js的方法
[_bridge callHandler:@"iosDownloadComplete" data:@"pdf路径" responseCallback:^(id responseData) {
NSLog(@"调用完js后的回调 %@",responseData);
}];
⚠️ 执行完上面代码在加载H5的URL，不然对象注入不会成功
- vue操作
在Vue中引入WebViewJavascriptBridge：
- 创建 src/config/bridge.js 文件，用于封装 WebViewJavascriptBridge，将以下代码拷贝到 bridge.js 文件中,以下代码是固定的
function setupWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge)
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback)
}
window.WVJBCallbacks = [callback]
var WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'https://__bridge_loaded__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
export default {
callhandler (name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback)
})
},
registerhandler (name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
}
- 在 main.js 中引入该文件
import Bridge from './config/bridge.js'
Vue.prototype.$bridge = Bridge
在需要调用客户端方法的组件中（事先需要与同事约定好方法名）
this.$bridge.callhandler('iosDownload', params, (data) => {
// 处理返回数据
})
iOS需要调用 js 函数（事先注册约定好的函数即可）
this.$bridge.registerhandler('iosDownloadComplete', (data, responseCallback) => {
alert('JS Echo called with:', data)
responseCallback(data)
})
