js交互
2020-05-02 更新
iOS与JS交互的方法：
- 拦截url（适用于UIWebView和WKWebView）
- JavaScriptCore（只适用于UIWebView，iOS7+）苹果将要放弃UIWebView了
- WKScriptMessageHandler（只适用于WKWebView，iOS8+）
- WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架）
现在貌似很多APP都有需求利用HTML5,所以我们需要了解iOS中JavaScript和OC交互的实现。 新建一个工程，添加一个空文件index.html
<html>
<!-- 网页的描述信息 -->
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script>
function event()
{
alert("调用JS方法成功哦~");
}
</script>
</head>
<!-- 网页的具体内容 -->
<body>
JS调用OC哦~~
<button style="background: blue; width:100px; height:30px;" onclick="event();">JS调用OC</button>
<br>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
- Objective-C语言调用JavaScript语言
- 通过UIWebView的
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;方法实现，利用该方法执行一段JavaScript代码。（JavaScript: 以下使用JS代替） - 获取当前网页的标题
1
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title;"];
- 获取当前网页的网址URL
1
NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:@"document.location.href;"]);
- 调用JS的方法
1
[webView stringByEvaluatingJavaScriptFromString:@"klevent();"]
- 以上执行情况如下
- 如果是自己写的HTML5网页，你可以控制里面的元素删除或者添加之类的，当然你得先懂点HTML5-JS知识
1 2 3
NSString *str = @"var p = document.getElementsByTagName('p')[0];" "p.remove();"; [webView stringByEvaluatingJavaScriptFromString:str];*
- 通过UIWebView的
- JS调用OC的方法
- 先来个简单的不带参数 ``` // 1. 先改变index.html中 function event() { location.href = ‘kl://’; } // 2. 在webView的代理方法中实现
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
// 获取将要加载的URL NSString *url = request.URL.absoluteString; NSString *scheme = @”kl://”; // 判断是否包含 if ([url hasPrefix:scheme]) { [self js1]; return NO; }
NSLog(@”加载其他请求，不是调用OC的方法”); return YES; }
1 2
 * 有一个参数// 1. 先改变index.html中 function event() { location.href = ‘kl://one=kellen’; } // 2. 在webView的代理方法中实现 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
// 获取将要加载的URL NSString *url = request.URL.absoluteString; NSString *scheme = @”kl://”; if ([url hasPrefix:scheme]) { // 获得协议后面的路径 path == js2?one=kellen NSString *path = [url substringFromIndex:scheme.length]; // 利用?切割路径 NSArray *subpaths = [path componentsSeparatedByString:@”?”]; // 方法名 methodName == js2 NSString *methodName = [[subpaths firstObject] stringByAppendingString:@”:”]; // 参数 kellen NSString *param = [subpaths lastObject]; [self performSelector:NSSelectorFromString(methodName) withObject:param]; // 当然，你也可以只获得参数，调用的方法名自己写 return NO; }
NSLog(@”加载其他请求，不是调用OC的方法”); return YES; }
1 2
 * 有两个或多个参数// 1. 先改变index.html中 function event() { location.href = ‘kl://js3two?one=kellen&two=Yangs’; } // 2. 在webView的代理方法中实现 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
// 获取将要加载的URL NSString *url = request.URL.absoluteString; NSString *scheme = @”kl://”; if ([url hasPrefix:scheme]) { // 获得协议后面的路径 path == js3two?one=kellen&two=Yangs NSString *path = [url substringFromIndex:scheme.length]; // 利用?切割路径 NSArray *subpaths = [path componentsSeparatedByString:@”?”]; // 方法名 methodName == js3two NSString *methodName = [[subpaths firstObject] stringByReplacingOccurrencesOfString:@”_” withString:@”:”]; // 参数 one=kellen&two=Yangs NSString *param = [subpaths lastObject]; NSArray *subparams = nil; if (subpaths.count == 2 || [param containsString:@”&”]) { subparams = [param componentsSeparatedByString:@”&”]; } // 取出前面的2个参数 NSString *firstParam = [subparams firstObject]; NSString *secondParam = subparams.count <= 1 ? nil : [subparams lastObject];
1 2 3
[self performSelector:NSSelectorFromString(methodName) withObject:firstParam withObject:secondParam]; return NO; } NSLog(@"加载其他请求，不是调用OC的方法"); return YES; } ``` 
- 有个三方库可以方便开发