iOS开发技巧之：WKWebView 与 JS 交互和基本使用

导入库

#import <WebKit/WebKit.h>

1、WKWebView 创建 不注册 js 调用 OC 的方法

//初始化
 _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) ];
// UI代理
_webView.UIDelegate = self;
// 导航代理
_webView.navigationDelegate = self;
// 是否允许手势左滑返回上一级, 类似导航控制的左滑返回
_webView.allowsBackForwardNavigationGestures = YES;
//可返回的页面列表, 存储已打开过的网页 
//  WKBackForwardList * backForwardList = [_webView backForwardList];

Webview 加载本地HTML

 NSString *path = [[NSBundle mainBundle] pathForResource:@"JStoOC.html" ofType:nil];
NSString *htmlString = [[NSString alloc]initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
//加载本地html文件
[_webView loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

Webview 加载网络HTML

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.chinadaily.com.cn"]];
[request addValue:[self readCurrentCookieWithDomain:@"http://www.chinadaily.com.cn"] forHTTPHeaderField:@"Cookie"];
[_webView loadRequest:request];

Webview 页面后退、前进和刷新

// 是否可以后退，返回 BOOL  YES 可以后退， NO 第一页，不可以后退，可以做 pop webView  操作
if ([_webView canGoBack]) {
//页面后退
    [_webView goBack];
}
else {
// pop webView 退出 webView 页面
}
// 是否可以前进，返回 BOOL  YES 可以前进， NO 第一页，不可以前进
if ([_webView canGoForward]) {
    //页面前进
    [_webView goForward];
}
else {
// 没有下一页
}
//刷新当前页面
[_webView reload];

2、WKWebView 创建注册 js 调用 OC 的方法，

是一个 js 调用 OC 的方法名称的数组, 这些方法是不带返回值的，即void 方法，可以带参数
例如：JSCallOCMethod1(‘jsonString’){ }

jsCallOCMethodNames = @[@"JSCallOCMethod1",@"JSCallOCMethod2"];

防止循环引用 WebViewScriptMessageDelegate 所以创建一个弱引用的 WeakWebViewScriptMessageDelegate

// WKWebView 内存不释放的问题解决
@interface WeakWebViewScriptMessageDelegate : NSObject<WKScriptMessageHandler>
    
//WKScriptMessageHandler 这个协议类专门用来处理JavaScript调用原生OC的方法
@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;
    
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;
    
@end

@implementation WeakWebViewScriptMessageDelegate
    
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}
    
#pragma mark - WKScriptMessageHandler
    //遵循WKScriptMessageHandler协议，必须实现如下方法，然后把方法向外传递
    //通过接收JS传出消息的name进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    if ([self.scriptDelegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
        [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
    }
}
    
@end

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
//以下代码适配文本大小，由UIWebView换为WKWebView后，会发现字体小了很多，这应该是WKWebView与html的兼容问题，解决办法是修改原网页，要么我们手动注入JS
NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
//用于进行JavaScript注入
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

[wkUController addUserScript:wkUScript];
// 创建一个弱引用的 WeakWebViewScriptMessageDelegate 防止循环引用
WeakWebViewScriptMessageDelegate *weakScriptMessageDelegate = [[WeakWebViewScriptMessageDelegate alloc] init];

for (NSString *methodName in jsCallOCMethodNames) {
     // 添加方法名监听 (主要是这步)
     [wkUController addScriptMessageHandler:weakScriptMessageDelegate name:methodName];
}
config.userContentController = wkUController;
//初始化
 _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) configuration:config];
// UI代理
_webView.UIDelegate = self;
// 导航代理
_webView.navigationDelegate = self;
// 是否允许手势左滑返回上一级, 类似导航控制的左滑返回
_webView.allowsBackForwardNavigationGestures = YES;
//可返回的页面列表, 存储已打开过的网页 
//  WKBackForwardList * backForwardList = [_webView backForwardList];

核心代码是 [config.userContentController addScriptMessageHandler:self name:methodName] 这样就添加了一个 JS 调用 OC 的方法监听，当 JS 调用方法时，通过WKScriptMessageHandler 代理方法来获取 JS 调用 OC 的方法的处理

JS 主动调用 OC 的方法的处理

OC 代码

处理添加监听的方法名，即 JS 主动调用 OC 的方法

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {
    // message.name  添加监听的方法名
    if ([message.name isEqualToString: @"JSCallOCMethod1"]) {
        //  message.body   是 `js` 传递的参数 ,一般是 json 字符串
        NSLog(@"MessageBody: %@", message.body);
    }
}

JS 代码

核心代码
window.webkit.messageHandlers.<添加监听的方法名>.postMessage(参数);
如何不需要参数 postMessage(' ') 这样处理

window.webkit.messageHandlers.JSCallOCMethod1.postMessage({"key1":"value1","key2":"value2"});

OC 主动调用 JS 的方法的处理

// OC 调用 JS 方法 并传参数 jsonString， 当不需要参数时，可以 ('') 这样处理

[self.webView evaluateJavaScript: @"OCCallJSMethod('jsonString')"
           completionHandler:^(id response, NSError * error) {
        NSLog(@"response: %@, \nerror: %@", response, error);
 }];

当 JS 需要调用 OC 带有参数和返回值的方法时

JS 代码

1、代用参数需要返回值的方法

let jsonString = window.prompt("jsCallOCReturnJsonStringMethod","参数jsonString");
//  jsonString  就是 OC 返回的 jsonString 

2、没有参数需要返回值的方法

let jsonString = window.prompt("jsCallOCReturnJsonStringMethod");
//  jsonString  就是 OC 返回的 jsonString 

OC 代码

这种方法不需要注册监听，是使用 UIDelegate 方法

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler {
    if (prompt) {
        // defaultText  是JS 传的JsonString参数
        if (defaultText.length > 0) {
              // 说明有参数
        }
        if ([prompt isEqualToString:@"jsCallOCReturnJsonStringMethod"]) {
            completionHandler(@"返回的结果，可以自定义");
        }
}

webview 设置 userAgent

   WKWebView *webView = [WKWebView new];
       [webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id _Nullable oldAgent, NSError * _Nullable error) {
           if (![oldAgent isKindOfClass:[NSString class]]) {
               // 为了避免没有获取到oldAgent，所以设置一个默认的userAgent
               // Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
               oldAgent = [NSString stringWithFormat:@"Mozilla/5.0 (%@; CPU iPhone OS %@ like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E216", [[UIDevice currentDevice] model], [[[UIDevice currentDevice] systemVersion] stringByReplacingOccurrencesOfString:@"." withString:@"_"]];
           }
           
           NSString *userAgentSuffix = @"自己想要拼接的标识";
           //自定义user-agent
           if (![oldAgent hasSuffix:userAgentSuffix]) {
               NSString *newAgent =  [oldAgent stringByAppendingFormat:@" %@",userAgentSuffix];;
               [[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent":newAgent}];
               [[NSUserDefaults standardUserDefaults] synchronize];
               // 一定要设置customUserAgent，否则执行navigator.userAgent拿不到oldAgent
               webView.customUserAgent = newAgent;
           }
       }];

HTML 测试文件源码

<!DOCTYPE html>
<html>
<header>
    
<title id = "title">Title of this page</title>

<!--样式从File.css文件中获取-->
<link rel="stylesheet" type="text/css" href="File.css">
<!--样式改变适应手机屏幕大小-->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!--响应的方法从File.js文件中获取-->
<!--<script type="text/javascript" src="File.js"></script>-->

</header>

<body>
    // 防止 汉字在 APP 端乱码
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--    标签，css中设置样式时，会根据id来设置-->
    <p id = "wql">This is my first try to write Html5 file.</p>
    <br/>
    <!--    加粗的文本，css中设置样式时，会根据id来设置-->
    <b id = "myp">This text is bold</b>

    <!--    换行符-->
    <br/><br/><br/><br/>
    
    <!--    该按钮的目的是：点击后触发OC的方法-->
    <button type="button" onclick = "JSCallOCMethod1()">JSCallOCMethod1</button>
    <br/><br/>
    
    <button type="button" onclick = "JSCallOCMethod2()">JSCallOCMethod2</button>
    <br/><br/>
    
    <button type="button" onclick = "jsCallOCReturnMethod()">jsCallOCReturnMethod </button>

    <!--        定义各个方法-->
    <script type="text/javascript">
        
    // js 主动调用 oc  方法  ，function JSCallOCMethod1 这个名字无关，这个是JS 绑定的
    function JSCallOCMethod1(){
        //  JSCallOCMethod1 是 oc 注册监听的方法
window.webkit.messageHandlers.JSCallOCMethod1.postMessage({"key1":"value1","key2":"value2"});
    }

    // js 主动调用 oc  方法  ，function JSCallOCMethod2 这个名字无关，这个是JS 绑定的
    function JSCallOCMethod2(){
       //  JSCallOCMethod2 是 oc 注册监听的方法window.webkit.messageHandlers.JSCallOCMethod2.postMessage({"key1":"value1","key2":"value2"});

    }
    
    //OC 主动调用的方法  接收从OC传过来的值，需要OC调用该方法，并传入值
    function OCCallJSMethod(jsonString){
        alert('js获取到的值'+'OCCallJSMethod:'+jsonString);
    }

    //OC 主动调用的方法   jsCallOCReturnJsonStringMethod 这个才是与 OC 交互的方法
    function jsCallOCReturnMethod(){
        //  js 获取 OC 接口返回值  有参数  123123123
        let jsonString = window.prompt("jsCallOCReturnJsonStringMethod","123123123");

        //  js 获取 OC 接口返回值  无参数 
        // let jsonString = window.prompt("jsCallOCReturnJsonStringMethod");
        alert('js获取到的值:'+'jsCallOCReturnJsonStringMethod:'+jsonString);
    }

    </script>
    
</body>
</html>