WKWebView

WKWebView涉及的一些類

WKWebView：網(wǎng)頁的渲染與展示

  • 相關(guān)屬性
// UI代理
@property (nullable, nonatomic, weak) id <WKUIDelegate> UIDelegate;

// 導(dǎo)航代理
@property (nullable, nonatomic, weak) id <WKNavigationDelegate> navigationDelegate;

// 是否允許手勢左滑返回上一級, 類似導(dǎo)航控制的左滑返回
@property (nonatomic) BOOL allowsBackForwardNavigationGestures;

//可返回的頁面列表, 存儲已打開過的網(wǎng)頁
@property (nonatomic, readonly, strong) WKBackForwardList *backForwardList;

//設(shè)置WKWebView的配置信息 
@property (nonatomic, readonly, copy) WKWebViewConfiguration *configuration;

//能否頁面后退
@property (nonatomic, readonly) BOOL canGoBack;
  • 相關(guān)方法
//頁面后退
- (nullable WKNavigation *)goBack;

//頁面前進
- (nullable WKNavigation *)goForward;

//刷新當(dāng)前頁面
- (nullable WKNavigation *)reload;

WKWebViewConfiguration：為添加WKWebView配置信息

//創(chuàng)建網(wǎng)頁配置對象
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    
// 創(chuàng)建設(shè)置對象
WKPreferences *preference = [[WKPreferences alloc]init];
//最小字體大小 當(dāng)將javaScriptEnabled屬性設(shè)置為NO時，可以看到明顯的效果
preference.minimumFontSize = 0;
//設(shè)置是否支持javaScript 默認是支持的
preference.javaScriptEnabled = YES;
// 在iOS上默認為NO，表示是否允許不經(jīng)過用戶交互由javaScript自動打開窗口
preference.javaScriptCanOpenWindowsAutomatically = YES;
config.preferences = preference;
    
// 是使用h5的視頻播放器在線播放, 還是使用原生播放器全屏播放
config.allowsInlineMediaPlayback = YES;
//設(shè)置視頻是否需要用戶手動播放  設(shè)置為NO則會允許自動播放
config.requiresUserActionForMediaPlayback = YES;
//設(shè)置是否允許畫中畫技術(shù) 在特定設(shè)備上有效
config.allowsPictureInPictureMediaPlayback = YES;
//設(shè)置請求的User-Agent信息中應(yīng)用程序名稱 iOS9后可用
config.applicationNameForUserAgent = @"ChinaDailyForiPad";
 //自定義的WKScriptMessageHandler 是為了解決內(nèi)存不釋放的問題
WeakWebViewScriptMessageDelegate *weakScriptMessageDelegate = [[WeakWebViewScriptMessageDelegate alloc] initWithDelegate:self];
//這個類主要用來做native與JavaScript的交互管理
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
//注冊一個name為jsToOcNoPrams的js方法
[wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"jsToOcWithPrams"];
config.userContentController = wkUController;

WKUserScript：用于進行JavaScript注入

//以下代碼適配文本大小，由UIWebView換為WKWebView后，會發(fā)現(xiàn)字體小了很多，這應(yīng)該是WKWebView與html的兼容問題，解決辦法是修改原網(wǎng)頁，要么我們手動注入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];
[config.userContentController addUserScript:wkUScript];

WKUserContentController：這個類主要用來做native與JavaScript的交互管理

//這個類主要用來做native與JavaScript的交互管理
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
//注冊一個name為jsToOcNoPrams的js方法，設(shè)置處理接收JS方法的代理
[wkUController addScriptMessageHandler:self  name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:self  name:@"jsToOcWithPrams"];
config.userContentController = wkUController;
//用完記得移除
//移除注冊的js方法
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"jsToOcNoPrams"];
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"jsToOcWithPrams"];

WKScriptMessageHandler：這個協(xié)議類專門用來處理監(jiān)聽JavaScript方法從而調(diào)用原生OC方法，和WKUserContentController搭配使用。

注意：遵守WKScriptMessageHandler協(xié)議，代理是由WKUserContentControl設(shè)置

//通過接收JS傳出消息的name進行捕捉的回調(diào)方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo);
    //用message.body獲得JS傳出的參數(shù)體
    NSDictionary * parameter = message.body;
    //JS調(diào)用OC
    if([message.name isEqualToString:@"jsToOcNoPrams"]){
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js調(diào)用到了oc" message:@"不帶參數(shù)" 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調(diào)用到了oc" message:parameter[@"params"] preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        }])];
        [self presentViewController:alertController animated:YES completion:nil];
    }
}

WKWebView涉及的代理方法

WKNavigationDelegate ：主要處理一些跳轉(zhuǎn)、加載處理操作

// 頁面開始加載時調(diào)用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation { }
// 頁面加載失敗時調(diào)用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error {}
// 當(dāng)內(nèi)容開始返回時調(diào)用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation { }
// 頁面加載完成之后調(diào)用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {}
//提交發(fā)生錯誤時調(diào)用
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {}
// 接收到服務(wù)器跳轉(zhuǎn)請求即服務(wù)重定向時之后調(diào)用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation {}
// 根據(jù)WebView對于即將跳轉(zhuǎn)的HTTP請求頭信息和相關(guān)信息來決定是否跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    //根據(jù)情況調(diào)用decisionHandler(WKNavigationActionPolicyAllow)來決定是否要跳轉(zhuǎn)這個鏈接
    NSString * urlStr = navigationAction.request.URL.absoluteString;
    //自己定義的協(xié)議頭
    NSString *htmlHeadString = @"github://";
    if([urlStr hasPrefix:htmlHeadString]){
        decisionHandler(WKNavigationActionPolicyCancel);
    }else{
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}
    
    // 根據(jù)客戶端受到的服務(wù)器響應(yīng)頭以及response相關(guān)信息來決定是否可以跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
    NSString * urlStr = navigationResponse.response.URL.absoluteString;
    NSLog(@"當(dāng)前跳轉(zhuǎn)地址：%@",urlStr);
    //允許跳轉(zhuǎn)
    decisionHandler(WKNavigationResponsePolicyAllow);
    //不允許跳轉(zhuǎn)
    //decisionHandler(WKNavigationResponsePolicyCancel);
}
    //需要響應(yīng)身份驗證時調(diào)用 同樣在block中需要傳入用戶身份憑證
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler{
    //用戶身份信息
    NSURLCredential * newCred = [[NSURLCredential alloc] initWithUser:@"user123" password:@"123" persistence:NSURLCredentialPersistenceNone];
    //為 challenge 的發(fā)送方提供 credential
    [challenge.sender useCredential:newCred forAuthenticationChallenge:challenge];
    completionHandler(NSURLSessionAuthChallengeUseCredential,newCred);
}
    //進程被終止時調(diào)用
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView{
}

WKUIDelegate ：主要處理JS腳本，確認框，警告框等

/**
 *  web界面中有彈出警告框時調(diào)用
 *
 *  @param webView           實現(xiàn)該代理的webview
 *  @param message           警告框中的內(nèi)容
 *  @param completionHandler 警告框消失調(diào)用
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"HTML的彈出框" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
}
    // 確認框
    //JavaScript調(diào)用confirm方法后回調(diào)的方法 confirm是js中的確定框，需要在block中把用戶選擇的情況傳遞進去
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(NO);
    }])];
    [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(YES);
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
}
    // 輸入框
    //JavaScript調(diào)用prompt方法后回調(diào)的方法 prompt是js中的輸入框 需要在block中把用戶輸入的信息傳入
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.text = defaultText;
    }];
    [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(alertController.textFields[0].text?:@"");
    }])];
    [self presentViewController:alertController animated:YES completion:nil];
}
    // 頁面是彈出窗口 _blank 處理
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
    if (!navigationAction.targetFrame.isMainFrame) {
        [webView loadRequest:navigationAction.request];
    }
    return nil;
}

網(wǎng)頁內(nèi)容加載進度條和title的實現(xiàn)

//添加監(jiān)測網(wǎng)頁加載進度的觀察者
[self.webView addObserver:self
               forKeyPath:@"estimatedProgress"
                  options:0
                  context:nil];
//添加監(jiān)測網(wǎng)頁標題title的觀察者
[self.webView addObserver:self
               forKeyPath:@"title"
                  options:NSKeyValueObservingOptionNew
                  context:nil];

//kvo 監(jiān)聽進度 必須實現(xiàn)此方法
-(void)observeValueForKeyPath:(NSString *)keyPath
                 ofObject:(id)object
                   change:(NSDictionary<NSKeyValueChangeKey,id> *)change
                  context:(void *)context{
if ([keyPath isEqualToString:NSStringFromSelector(@selector(estimatedProgress))]
    && object == _webView) {
   NSLog(@"網(wǎng)頁加載進度 = %f",_webView.estimatedProgress);
    self.progressView.progress = _webView.estimatedProgress;
    if (_webView.estimatedProgress >= 1.0f) {
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.progressView.progress = 0;
        });
    }
}else if([keyPath isEqualToString:@"title"]
         && object == _webView){
    self.navigationItem.title = _webView.title;
}else{
    [super observeValueForKeyPath:keyPath
                         ofObject:object
                           change:change
                          context:context];
}
}
//移除觀察者
[_webView removeObserver:self
              forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
[_webView removeObserver:self
              forKeyPath:NSStringFromSelector(@selector(title))];

JS和OC的交互

  • JS調(diào)用OC

這個實現(xiàn)主要是依靠WKScriptMessageHandler協(xié)議類和WKUserContentController兩個類：WKUserContentController對象負責(zé)注冊JS方法，設(shè)置處理接收JS方法的代理，代理遵守WKScriptMessageHandler，實現(xiàn)捕捉到JS消息的回調(diào)方法，詳情可以看第一步中對這兩個類的介紹。

//這個類主要用來做native與JavaScript的交互管理
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
//注冊一個name為jsToOcNoPrams的js方法，設(shè)置處理接收JS方法的代理
[wkUController addScriptMessageHandler:self  name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:self  name:@"jsToOcWithPrams"];
config.userContentController = wkUController;

注意：遵守WKScriptMessageHandler協(xié)議，代理是由WKUserContentControl設(shè)置

//通過接收JS傳出消息的name進行捕捉的回調(diào)方法  js調(diào)OC
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo);
}
  • OC調(diào)用JS
//OC調(diào)用JS  changeColor()是JS方法名，completionHandler是異步回調(diào)block
NSString *jsString = [NSString stringWithFormat:@"changeColor('%@')", @"Js參數(shù)"];
[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
    NSLog(@"改變HTML的背景色");
}];
    
//改變字體大小 調(diào)用原生JS方法
NSString *jsFont = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", arc4random()%99 + 100];
[_webView evaluateJavaScript:jsFont completionHandler:nil];

參考文章： iOS WKWebView的使用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容