在app中，经常会嵌入一下HTML 界面，避免不了和JS进行一些交互。
iOS端，经常使用的控件是WKWebView和UIWebView。
今天我来简单的介绍一下，OC与JS互调的方法，以下方法应该可以满足各位码农的一般使用！
下面废话少说，上代码！！！
一、WKWebView 与 OC 的互调
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content= width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0>
<title>WkWebView与JS互调</title>
</head>
<body>
<button onclick="getImage()" style="height:50px;width:100px;"> JS调用OC </button>
<script type="text/javascript">
<!-- JS调用OC -->
function getImage() {
window.webkit.messageHandlers.myName.postMessage("JS调用OC");
}
</script>
<script>
<!-- OC调用JS -->
function payResult(str){
alert(str);
}
</script>
</body>
</html>
把以上的创建一个HTML,并把上面的HTML的代码复制到里面，然后，把HTML的工程文件复制到你的工程里面。
创建WKWebView，并把HTML加载到WKWebView。
/** 加载HTML */
NSURL *filePath = [[NSBundle mainBundle] URLForResource:@"untitled.html" withExtension:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:filePath];
/** 以下 方法会接受OC传给JS 的参数 之后再打印出来 */
WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc]init];
[theConfiguration.userContentController addScriptMessageHandler:self name:@"myName"];
/** 以上 */
self.wkWeb = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:theConfiguration];
self.wkWeb.backgroundColor = [UIColor redColor];
self.wkWeb.navigationDelegate = self;
self.wkWeb.UIDelegate = self;
self.wkWeb.clipsToBounds = YES;
[self.view addSubview:self.wkWeb];
[self.wkWeb loadRequest:request];
1、OC调用JS
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
/** 此方法是向JS代码传参数 */
NSString * jsStr = [NSString stringWithFormat:@"payResult('%@')",@"OC调用JS"];
[self.wkWeb evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"==%@----%@",result, error);
}];
}
/**
* 此方法会接受 JS 的alert
* 但是 JS 的alert 不会在客户端弹出，会接受到 弹窗要弹出的数据 然后可以打印出来
* OC 调用 JS
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
2、JS调用OC
/**
* 使用此方法的回调
* WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc]init];
* [theConfiguration.userContentController addScriptMessageHandler:self name:@"myName"];
* JS 调用 OC
*/
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
NSString *str = message.body;
UIAlertView * messAlert = [[UIAlertView alloc] initWithTitle:nil message:str delegate:nil cancelButtonTitle:@"yes"otherButtonTitles:nil,nil];
[messAlert show];
}
二、UIWebView 与 OC 的互调
HTML代码
<html>
<head>
<meta charset="UTF-8"/>
<title>iOS上webView与JS交互的之oc调用js的demo</title>
<script>
function showTitleMessage(message) {
alert(message);
}
function asdw(str) {
bdgtasdw(str);
}
</script>
</head>
<body>
<h1>下面是网页</h1>
<button style = "font-size:50px; background: yellow; height: 150px; width: 350px;" onclick = "asdw('webView JS 调用 OC');">点击按钮js调用oc</button>
</body>
</html>
1、OC调用JS
- (IBAction)UIWebviewOCAndJS:(id)sender {
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"showTitleMessage('%@')",@"WebView oc调用了js的内容"]];
}
2、JS调用OC
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
content[@"bdgtasdw"] = ^() {
NSLog(@"js调用oc---------begin--------");
NSArray *thisArr = [JSContext currentArguments];
dispatch_async(dispatch_get_main_queue(), ^{
for (JSValue *jsValue in thisArr) {
UIAlertView * messAlert = [[UIAlertView alloc] initWithTitle:nil message:[NSString stringWithFormat:@"%@",jsValue] delegate:nil cancelButtonTitle:@"yes"otherButtonTitles:nil,nil];
[messAlert show];
}
});
NSLog(@"js调用oc---------The End-------");
};
}
Demo地址
希望以上的内容会对你有所启发！
