WKWebView的优势
- 性能高，稳定性好，占用的内存比较小，
- 支持JS交互
- 支持HTML5 新特性
- 可以添加进度条（然并卵，不好用，还是习惯第三方的）。
- 支持内建手势，
- 据说高达60fps的刷新频率（不卡）
1.Xcode新建My.html文件，自定义html内容，主要代码如下：
(1)标签为UI样式（写了简单的JS代码，目的用于讲解交互）
(2)onClick为JS事件，当JS想给OC传递参数时，采用如下代码：window.webkit.messageHandlers.<方法名>.postMessage(数据)
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<h1 style="text-align:center;background-color: #e6b500;wdith:100px;height:40px">欢迎来到JS世界</h1>
<p style="text-align:center"> <a href="github://callName_?https://github.com/wslcmk" rel="external nofollow" >Github主页</a> ：截获URL调用OC</p>
<p style="text-align:center"> <a href="http://192.168.0.116/monkey/iOS-URNetworking/commits/master" rel="external nofollow" >GitLab主页</a> </p>
<p style="text-align:center"> <button id="btn1" type = "button" onclick = "jsToOcFunctionOne()" > JS调用OC->不带参数 </button> </p>
<p style="text-align:center"> <button id="btn2" type = "button" onclick = "jsToOcFunctionTwo()"> JS调用OC->带参数 </button> </p>
<p style="text-align:center"> <button id="btn3" type = "button" onclick = "showAlert()" > oc捕获到html的弹出框 </button> </p>
<!-- JS语法-->
<script type = "text/javascript">
function jsToOcFunctionOne()
{
window.webkit.messageHandlers.jsToOcNoPrams.postMessage({});
}
function jsToOcFunctionTwo()
{
window.webkit.messageHandlers.jsToOcWithPrams.postMessage({"params":"我是JS参数"});
}
function showAlert()
{
alert("我来自JS世界，被你发现了");
}
//改变背景色
function changeBgColor()
{
document.body.style.backgroundColor = randomColor();
}
|
2.KVO实现加载进度条以及标题
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// KVO监听：获取进度并显示 获取标题并显示
[self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
[self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
{
if ([keyPath isEqualToString:@"title"]&&object == _webView) {
self.title = _webView.title;
}else if ([keyPath isEqualToString:@"estimatedProgress"]
&& object == _webView)
{
self.progressView.progress = _webView.estimatedProgress;
if (_webView.estimatedProgress >= 1.0f) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)),
dispatch_get_main_queue(), ^{
self.progressView.progress = 0;
});
}
}
}
|
3.通过拦截url方式，JS调用OC代码，决定是否跳转（WKNavigationDelegate代理）
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#pragma mark -- WKNavigationDelegate WKNavigationDelegate主要处理一些跳转、加载处理操作
// 根据WebView对于即将跳转的HTTP请求头信息和相关信息来决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSString * urlStr = navigationAction.request.URL.absoluteString;
NSLog(@"发送跳转请求：%@",urlStr);
//自己定义的协议头
NSString *htmlHeadString = @"github://";
if([urlStr hasPrefix:htmlHeadString]){
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"通过截取URL调用OC" message:@"前往Github?" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
}])];
[alertController addAction:([UIAlertAction actionWithTitle:@"打开" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
NSURL * url = [NSURL URLWithString:[urlStr stringByReplacingOccurrencesOfString:@"github://callName_?" withString:@""]];
[[UIApplication sharedApplication]canOpenURL:url];
}])];
[self presentViewController:alertController animated:YES completion:nil];
decisionHandler(WKNavigationActionPolicyCancel);
}else{
decisionHandler(WKNavigationActionPolicyAllow);
}
}
|
4.OC获取JS alert内容（WKUIDelegate处理警告、输入、以及确认，这里只列举了alert。输入和确认就不一一列举了，分别是JS端confirm和prompt函数触发）
当调用JS端alert函数时：通过如下代理获取alert内容
?
|
1
2
3
4
5
6
7
8
|
#pragma mark -- WKUIDelegate WKUIDelegate主要处理JS脚本，确认框，警告框等
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"JS-alert-Action" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
|
5.OC调用JS代码，实现改变JS页面颜色（通过evaluateJavaScript函数、jsString为JS端方法名）
?
|
1
2
3
4
5
6
7
8
9
|
#pragma mark -navigationItem Action
- (void)ocToJs
{
// changeColor()是JS方法名
NSString *jsString = [NSString stringWithFormat:@"changeBgColor()"];
[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
}];
}
|
6.通过接受JS方法名捕捉方法（带参数和不带参数，JS端向IOS传递参数，采用window.webkit.messageHandlers.<方法名>.postMessage(数据)）
（1）需要引入WKUserContentController、主要代码如下
?
|
1
2
3
4
5
6
7
|
//创建网页配置对象
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
//注册一个name为jsToOcNoPrams的js方法 设置处理接收JS方法的对象
[wkUController addScriptMessageHandler:self name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:self name:@"jsToOcWithPrams"];
config.userContentController = wkUController;
|
（2）核心代码
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#pragma mark - 通过接收JS传出消息的name进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"name:%@\\\\\\\\n body:%@\\\\\\\\n frameInfo:%@\\\\\\\\n",message.name,message.body,message.frameInfo);
//用message.body获得JS传出的参数体
NSDictionary * parameter = message.body;
//JS调用OC
if([message.name isEqualToString:@"jsToOcNoPrams"]){
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:@"不带参数" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
}])];
[self presentViewController:alertController animated:YES completion:nil];
}else if([message.name isEqualToString:@"jsToOcWithPrams"]){
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:parameter[@"params"] preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。
相关文章
猜你喜欢
- 个人服务器网站搭建：如何选择适合自己的建站程序或框架？ 2025-06-10
- 64M VPS建站：能否支持高流量网站运行？ 2025-06-10
- 64M VPS建站：怎样选择合适的域名和SSL证书？ 2025-06-10
- 64M VPS建站：怎样优化以提高网站加载速度？ 2025-06-10
- 64M VPS建站：是否适合初学者操作和管理？ 2025-06-10
