iOS WKWebView的使用 | Kyren's Blog

1、WKWebView与js交互

主要有两方面：1、js执行OC代码 2、oc调取写好的js代码

js调用OC：
js是不能执行oc代码的，但是可以变相的执行，js可以将要执行的操作封装到网络请求里面，然后oc拦截这个请求，获取url里面的字符串解析即可，这里用到的代理协议。

主要原理：通过 UIWebVIew 的代理方法截取 web 前端的跳转请求，通过识别与 web 前端约定好的自定义协议头来判断本次请求是否为 JS 调用 Native 的请求，来调用对应的 Native 方法。

UIWebview
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
  //拦截请求处理协议
}

WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
  //拦截请求处理协议
}

OC调用js：

这里用到UIwebview的一个方法。示例代码:获取网页title：

//返回值为 JS 执行结果，如果 JS 执行失败则返回 nil，如果 JS 执行没有返回值，则返回值为空字符串
#pragma mark-----UIWebView WKNavigationDelegate -----
- (void)webViewDidFinishLoad:(UIWebView*)webView
{
    NSString* str = [self.webView stringByEvaluatingJavaScriptFromString:@"pageDidLoad()"];
    NSLog(@"%@", str);
    // 获取网页的title
NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}

pragma mark-----WKWebView WKNavigationDelegate -----
// self.webView.navigationDelegate=self;--WKNavigationDelegate
// javaScriptString 为待执行的 JS 语句
// completionHandler 为执行 JS 完毕后的回调，block 的第一个参数为执行结果，第二个参数为错误
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
[self.webView evaluateJavaScript:@"pageDidLoad()" completionHandler:^(id _Nullable value, NSError* _Nullable error) {
  NSLog(@"%@", value);
}];
}

js检查是否安装QQ&&微信

// 创建并配置 WKWebView 的相关参数
WKWebViewConfiguration* config = [[WKWebViewConfiguration alloc] init];
//检查是否安装微信&&QQ
NSString *installJS = @"var pcaction={}; pcaction.isInstallWX=function(){return true};pcaction.isInstallQQ=function(){return false};";
WKUserScript *installScript = [[WKUserScript alloc] initWithSource:installJS injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
  [config.userContentController addUserScript:installScript];
WKWebView *webView=[[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];

滑动白屏，停止后才渲染页面问题？

https://stackoverflow.com/questions/39549103/wkwebview-not-rendering-correctly-in-ios-10

WKUserContentController:为JS提供了一个发送消息的通道并且可以向页面注入JS的类，WKUserContentController对象可以添加多个scriptMessageHandler；
addScriptMessageHandler:name:有两个参数，第一个参数是userContentController的代理对象，第二个参数是JS里发送postMessage的对象。添加一个脚本消息的处理器
同时需要在html的JS中添加：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
才能起作用。

<script>
    //OC调用JS的方法列表
    function alertMobile() {
        //这里已经调用过来了 但是搞不明白为什么alert方法没有响应
        //alert('我是上面的小黄 手机号是:13300001111')
        document.getElementById('mobile').innerHTML = '我是上面的小黄 手机号是:13300001111'
    }
    function alertName(msg) {
        //alert('你好 ' + msg + ', 我也很高兴见到你')
        document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'
    }
    function alertSendMsg(num,msg) {
        //window.alert('这是我的手机号:' + num + ',' + msg + '!!')
        document.getElementById('msg').innerHTML = '这是我的手机号:' + num + ',' + msg + '!!'
    }

    //JS响应方法列表
    function btnClick1() {
        window.webkit.messageHandlers.showMobile.postMessage(null)
    }
    function btnClick2() {
        window.webkit.messageHandlers.showName.postMessage('xiao黄')
    }
    function btnClick3() {
        window.webkit.messageHandlers.showSendMsg.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])
    }
</script>