iOs遷至WKWebView跨過(guò)的一些坑
前言
在iOS中有兩種網(wǎng)頁(yè)視圖可以加載網(wǎng)頁(yè)除了系統(tǒng)的那個(gè)控制器。一種是UIWebView,另一種是WKWebView,其實(shí)WKWebView就是想替代UIWebView的,因?yàn)槲覀兌贾繳IWebView非常占內(nèi)存等一些問(wèn)題,但是現(xiàn)在很多人還在使用UIWebView這是為啥呢?而且官方也宣布在iOS12中廢棄了UIWebView讓我們盡快使用WKWebView。其實(shí)也就是這些東西:**頁(yè)面尺寸問(wèn)題、JS交互、請(qǐng)求攔截、cookie帶不上的問(wèn)題。**所以有時(shí)想要遷移還得解決這些問(wèn)題,所以還是很煩的,所以一一解決嘍。
頁(yè)面尺寸的問(wèn)題
我們知道有些網(wǎng)頁(yè)在UIWebView上顯示好好地,使用WKWebView就會(huì)出現(xiàn)尺寸的問(wèn)題,這時(shí)很納悶,安卓也不會(huì),你總不說(shuō)是前端的問(wèn)題吧?但其實(shí)是WKWebView中網(wǎng)頁(yè)是需要適配一下,所以自己添加JS吧,當(dāng)然和前端關(guān)系好就可以叫他加的。下面通過(guò)設(shè)置配置中的userContentController來(lái)添加JS。
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; WKUserContentController *wkUController = [[WKUserContentController alloc] init]; [wkUController addUserScript:wkUScript]; configuration.userContentController = wkUController;
JS交互
我們都知道在UIWebView中可以使用自家的JavaScriptCore來(lái)進(jìn)行交互非常的方便。在JavaScriptCore中有三者比較常用那就是JSContext(上下文)、JSValue(類型轉(zhuǎn)換)、JSExport(js調(diào)OC模型方法)。
在UIWebView中的便利交互方法
//JSContext就為其提供著運(yùn)行環(huán)境 H5上下文 - (void)webViewDidFinishLoad:(UIWebView *)webView{ JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; self.jsContext = jsContext; }
// 執(zhí)行腳本增加js全局變量 [self.jsContext evaluateScript:@"var arr = [3, '3', 'abc'];"];
// ⚠️添加JS方法,需要注意的是添加的方法會(huì)覆蓋原有的JS方法,因?yàn)槲覀兪窃诰W(wǎng)頁(yè)加載成功后獲取上下文來(lái)操作的。 // 無(wú)參數(shù)的 self.jsContext[@"alertMessage"] = ^() { NSLog(@"JS端調(diào)用alertMessage時(shí)就會(huì)跑到這里來(lái)!"); }; // 帶參數(shù)的,值必須進(jìn)行轉(zhuǎn)換 self.jsContext[@"showDict"] = ^(JSValue *value) { NSArray *args = [JSContext currentArguments]; JSValue *dictValue = args[0]; NSDictionary *dict = dictValue.toDictionary; NSLog(@"%@",dict); };
// 獲取JS中的arr數(shù)據(jù) JSValue *arrValue = self.jsContext[@"arr"];
// 異常捕獲 self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) { weakSelf.jsContext.exception = exception; NSLog(@"exception == %@",exception); };
// 給JS中的對(duì)象重新賦值 OMJSObject *omObject = [[OMJSObject alloc] init]; self.jsContext[@"omObject"] = omObject; NSLog(@"omObject == %d",[omObject getSum:20 num2:40]); // 我們都知道object必須要遵守JSExport協(xié)議時(shí),js可以直接調(diào)用object中的方法,并且需要把函數(shù)名取個(gè)別名。在JS端可以調(diào)用getS,OC可以繼續(xù)使用這個(gè)getSum這個(gè)方法 @protocol OMProtocol <JSExport> // 協(xié)議 - 協(xié)議方法 JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2); @end
在WKWebView中如何做呢?
不能像上面那樣,系統(tǒng)提供的是通過(guò)以下兩種方法,所以是比較難受,而且還得前端使用messageHandler來(lái)調(diào)用,即安卓和iOS分開(kāi)處理。
// 直接調(diào)用js NSString *jsStr = @"var arr = [3, '3', 'abc']; "; [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) { NSLog(@"%@----%@",result, error); }];
// 下面是注冊(cè)名稱后,js使用messageHandlers調(diào)用了指定名稱就會(huì)進(jìn)入到代理中 // OC我們添加了js名稱后 - (void)viewDidLoad{ //... [wkUController addScriptMessageHandler:self name:@"showtime"]; configuration.userContentController = wkUController; } // JS中messageHandlers調(diào)用我們?cè)贠C中的名稱一致時(shí)就會(huì)進(jìn)入后面的到OC的代理 window.webkit.messageHandlers.showtime.postMessage(''); // 代理,判斷邏輯 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ if ([message.name isEqualToString:@"showtime"]) { NSLog(@"來(lái)了!"); } NSLog(@"message == %@ --- %@",message.name,message.body); } // 最后在dealloc必須移除 [self.userContentController removeScriptMessageHandlerForName:@"showtime"];
//如果是彈窗的必須自己實(shí)現(xiàn)代理方法 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler { UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert]; [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) { completionHandler(); }]]; [self presentViewController:alert animated:YES completion:nil]; }
一直用一直爽的交互
我們上面寫了兩者的一些交互,雖然可以用呢,但是沒(méi)有帶一種很簡(jiǎn)單很輕松的境界,所以有一個(gè)開(kāi)源庫(kù):WebViewJavaScriptBridge。這個(gè)開(kāi)源庫(kù)可以同時(shí)兼容兩者,而且交互很簡(jiǎn)單,但是你必須得前端一起,否則就哦豁了。
// 使用 self.wjb = [WebViewJavascriptBridge bridgeForWebView:self.webView]; // 如果你要在VC中實(shí)現(xiàn) UIWebView的代理方法 就實(shí)現(xiàn)下面的代碼(否則省略) [self.wjb setWebViewDelegate:self]; // 注冊(cè)js方法名稱 [self.wjb registerHandler:@"jsCallsOC" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"currentThread == %@",[NSThread currentThread]); NSLog(@"data == %@ -- %@",data,responseCallback); }]; // 調(diào)用JS dispatch_async(dispatch_get_global_queue(0, 0), ^{ [self.wjb callHandler:@"OCCallJSFunction" data:@"OC調(diào)用JS" responseCallback:^(id responseData) { NSLog(@"currentThread == %@",[NSThread currentThread]); NSLog(@"調(diào)用完JS后的回調(diào):%@",responseData); }]; });
前端使用實(shí)例如下,具體使用方法可以查看WebViewJavaScriptBridge。
function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) } setupWebViewJavascriptBridge(function(bridge) { /* Initialize your app here */ bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log("JS Echo called with:", data) responseCallback(data) }) bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log("JS received response:", responseData) }) })
請(qǐng)求攔截
我們UIWebView在早期是使用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
來(lái)根據(jù)scheme、host、pathComponents進(jìn)行攔截做自定義邏輯處理。但是這種方法不是很靈活,于是就使用NSURLProtocol來(lái)進(jìn)行攔截,例如微信攔截淘寶一樣,直接顯示一個(gè)提示。又或者是攔截請(qǐng)求調(diào)用本地的接口,打開(kāi)相機(jī)、錄音、相冊(cè)等功能。還能直接攔截后改變?cè)械膔equest,直接返回?cái)?shù)據(jù)或者其他的url,在一些去除廣告時(shí)可以的用得上。
我們使用的時(shí)候必須要使用NSURLProtocol的子類來(lái)進(jìn)行一些操作。并在使用前需要注冊(cè)自定義的Class。攔截后記得進(jìn)行標(biāo)記一下,防止自循環(huán)多執(zhí)行。可惜的是在WKWebView中不能進(jìn)行攔截后處理的操作,只能監(jiān)聽(tīng)卻改變不了。源于WKWebView采用的是webkit加載,和系統(tǒng)的瀏覽器一樣的機(jī)制。
// 子類 @interface OMURLProtocol : NSURLProtocol<NSURLSessionDataDelegate> @property (nonatomic, strong) NSURLSession *session; @end // 注冊(cè) [NSURLProtocol registerClass:[OMURLProtocol class]];
// 1. 首先會(huì)在這里來(lái)進(jìn)行攔截,返回YES則表示需要經(jīng)過(guò)我們自定義處理,NO則走系統(tǒng)處理 + (BOOL)canInitWithRequest:(NSURLRequest *)request; // 2.攔截處理將會(huì)進(jìn)入下一個(gè)環(huán)節(jié), 返回一個(gè)標(biāo)準(zhǔn)化的request,可以在這里進(jìn)行重定向 + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request; // 3.是否成功攔截都會(huì)走這個(gè)方法, 可以在這里進(jìn)行一些自定義處理 - (void)startLoading; // 4. 任何網(wǎng)絡(luò)請(qǐng)求都會(huì)走上面的攔截處理,即使我們重定向后還會(huì)再走一次或多次流程,需要標(biāo)記來(lái)處理 // 根據(jù)request獲取標(biāo)記值來(lái)決定是否需要攔截,在canInitWithRequest內(nèi)處理 + (nullable id)propertyForKey:(NSString *)key inRequest:(NSURLRequest *)request; // 標(biāo)記 + (void)setProperty:(id)value forKey:(NSString *)key inRequest:(NSMutableURLRequest *)request; // 移除標(biāo)記 + (void)removePropertyForKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
請(qǐng)求頭或數(shù)據(jù)混亂問(wèn)題
還需要注意的一點(diǎn)是,如果實(shí)現(xiàn)線了攔截處理的話,我們?cè)谑褂肁FN和URLSession進(jìn)行訪問(wèn)的時(shí)候攔截會(huì)發(fā)現(xiàn)數(shù)據(jù)或請(qǐng)求頭可能和你攔截處理后的數(shù)據(jù)或請(qǐng)求不符合預(yù)期,這是因?yàn)槲覀冊(cè)跀r截的時(shí)候只是先請(qǐng)求了A后請(qǐng)求了B,這是不符合預(yù)期的,雖然URLConnection不會(huì)但是已被廢棄不值得提倡使用。我們通過(guò)在攔截的時(shí)候通過(guò)LLDB打印session中配置的協(xié)議時(shí),發(fā)現(xiàn)是這樣的沒(méi)有包含我們自定義的協(xié)議,我們通過(guò)Runtime交換方法交換protocolClasses方法,我們實(shí)現(xiàn)我們自己的protocolClasses方法。但是為了保證系統(tǒng)原有的屬性,我們應(yīng)該在系統(tǒng)原有的協(xié)議表上加上我們的協(xié)議類。在當(dāng)前我們雖然可以通過(guò)[NSURLSession sharedSession].configuration.protocolClasses;獲取系統(tǒng)默認(rèn)的協(xié)議類,但是如果我們?cè)诋?dāng)前自定義的類里protocolClasses寫的話會(huì)造成死循環(huán),因?yàn)槲覀兘粨Q了該屬性的getter方法。我們使用保存類名然后存儲(chǔ)至NSUserDefaults,取值時(shí)在還原class。
po session.configuration.protocolClasses <__NSArrayI 0x600001442d00>( _NSURLHTTPProtocol, _NSURLDataProtocol, _NSURLFTPProtocol, _NSURLFileProtocol, NSAboutURLProtocol )
// 自定義返回我們的協(xié)議類 - (NSArray *)protocolClasses { NSArray *originalProtocols = [OMURLProtocol readOriginalProtocols]; NSMutableArray *newProtocols = [NSMutableArray arrayWithArray:originalProtocols]; [newProtocols addObject:[OMURLProtocol class]]; return newProtocols; } // 我們?cè)俅未蛴r(shí)發(fā)現(xiàn)已經(jīng)加上我們自定義的協(xié)議類了 po session.configuration.protocolClasses <__NSArrayM 0x60000041a4f0>( _NSURLHTTPProtocol, _NSURLDataProtocol, _NSURLFTPProtocol, _NSURLFileProtocol, NSAboutURLProtocol, OMURLProtocol )
// 存儲(chǔ)系統(tǒng)原有的協(xié)議類 + (void)saveOriginalProtocols: (NSArray<Class> *)protocols{ NSMutableArray *protocolNameArray = [NSMutableArray array]; for (Class protocol in protocols){ [protocolNameArray addObject:NSStringFromClass(protocol)]; } NSLog(@"協(xié)議數(shù)組為: %@", protocolNameArray); [[NSUserDefaults standardUserDefaults] setObject:protocolNameArray forKey:originalProtocolsKey]; [[NSUserDefaults standardUserDefaults] synchronize]; } // 獲取系統(tǒng)原有的協(xié)議類 + (NSArray<Class> *)readOriginalProtocols{ NSArray *classNames = [[NSUserDefaults standardUserDefaults] valueForKey:originalProtocolsKey]; NSMutableArray *origianlProtocols = [NSMutableArray array]; for (NSString *name in classNames){ Class class = NSClassFromString(name); [origianlProtocols addObject: class]; } return origianlProtocols; }
+ (void)hookNSURLSessionConfiguration{ NSArray *originalProtocols = [NSURLSession sharedSession].configuration.protocolClasses; [self saveOriginalProtocols:originalProtocols]; Class cls = NSClassFromString(@"__NSCFURLSessionConfiguration") ?: NSClassFromString(@"NSURLSessionConfiguration"); Method originalMethod = class_getInstanceMethod(cls, @selector(protocolClasses)); Method stubMethod = class_getInstanceMethod([self class], @selector(protocolClasses)); if (!originalMethod || !stubMethod) { [NSException raise:NSInternalInconsistencyException format:@"沒(méi)有這個(gè)方法 無(wú)法交換"]; } method_exchangeImplementations(originalMethod, stubMethod); }
Cookie的攜帶問(wèn)題
很多應(yīng)用場(chǎng)景中需要使用session來(lái)進(jìn)行處理,在UIWebView中很容易做到攜帶這些Cookie,但是由于WKWebView的機(jī)制不一樣,跨域會(huì)出現(xiàn)丟失cookie的情況是很糟糕的。目前有兩種用法:腳本和手動(dòng)添加cookie。腳本不太靠譜,建議使用手動(dòng)添加更為保險(xiǎn)。
// 使用腳本來(lái)添加cookie // 獲取去cookie數(shù)據(jù) - (NSString *)cookieString { NSMutableString *script = [NSMutableString string]; [script appendString:@"var cookieNames = document.cookie.split('; ').map(function(cookie) { return cookie.split('=')[0] } );\n"]; for (NSHTTPCookie *cookie in [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookies]) { if ([cookie.value rangeOfString:@"'"].location != NSNotFound) { continue; } [script appendFormat:@"if (cookieNames.indexOf('%@') == -1) { document.cookie='%@'; };\n", cookie.name, cookie.kc_formatCookieString]; } return script; } // 添加cookie WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource:[self cookieString] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO]; [[[WKUserContentController alloc] init] addUserScript: cookieScript];
// 添加一個(gè)分類來(lái)修復(fù)cookie丟失的問(wèn)題 @interface NSURLRequest (Cookie) - (NSURLRequest *)fixCookie; @end @implementation NSURLRequest (Cookie) - (NSURLRequest *)fixCookie{ NSMutableURLRequest *fixedRequest; if ([self isKindOfClass:[NSMutableURLRequest class]]) { fixedRequest = (NSMutableURLRequest *)self; } else { fixedRequest = self.mutableCopy; } //防止Cookie丟失 NSDictionary *dict = [NSHTTPCookie requestHeaderFieldsWithCookies:[NSHTTPCookieStorage sharedHTTPCookieStorage].cookies]; if (dict.count) { NSMutableDictionary *mDict = self.allHTTPHeaderFields.mutableCopy; [mDict setValuesForKeysWithDictionary:dict]; fixedRequest.allHTTPHeaderFields = mDict; } return fixedRequest; } @end // 使用場(chǎng)景 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { [navigationAction.request fixCookie]; decisionHandler(WKNavigationActionPolicyAllow); }
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
- iOS WKWebView適配實(shí)戰(zhàn)篇
- iOS開(kāi)發(fā)教程之WKWebView與JS的交互
- iOS中WKWebView仿微信加載進(jìn)度條
- vue 項(xiàng)目 iOS WKWebView 加載
- 簡(jiǎn)單說(shuō)說(shuō)iOS之WKWebView的用法小結(jié)
- iOS中WKWebView的一些特殊使用總結(jié)
- iOS使用WKWebView加載HTML5不顯示屏幕寬度的問(wèn)題解決
- iOS和JS交互教程之WKWebView-協(xié)議攔截詳解
- iOS中wkwebView內(nèi)存泄漏與循環(huán)引用問(wèn)題詳解
- iOS中WKWebView白屏問(wèn)題的分析與解決
- 微信小程序iOS下拉白屏晃動(dòng)問(wèn)題解決方案
- iOS WKWebview 白屏檢測(cè)實(shí)現(xiàn)的示例
相關(guān)文章
searchDisplayController 引起的數(shù)組越界處理辦法
這篇文章主要介紹了searchDisplayController 引起的數(shù)組越界處理辦法,需要的朋友可以參考下2015-07-07ios7中UIViewControllerBasedStatusBarAppearance作用詳解
這篇文章主要介紹了 ios7中UIViewControllerBasedStatusBarAppearance作用詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11iOS SwiftUI 顏色漸變填充效果的實(shí)現(xiàn)
這篇文章主要介紹了iOS SwiftUI 顏色漸變填充效果的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果
這篇文章主要介紹了iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果,OC和Swift兩個(gè)版本,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05iOS中指紋識(shí)別常見(jiàn)問(wèn)題匯總
最近在公司做了一個(gè)app要使用指紋支付的功能,在實(shí)現(xiàn)過(guò)程中遇到各種坑,今天小編抽抗給大家總結(jié)把遇到問(wèn)題匯總特此分享到腳本之家平臺(tái),需要的朋友參考下2016-12-12IOS購(gòu)物車界面實(shí)現(xiàn)效果示例
本篇文章主要介紹了IOS購(gòu)物車界面實(shí)現(xiàn)效果示例,有需要了解的朋友可參考。希望此文章對(duì)各位有所幫助。2017-02-02iOS App開(kāi)發(fā)中使用設(shè)計(jì)模式中的單例模式的實(shí)例解析
單例模式是最簡(jiǎn)單和基本的一種設(shè)計(jì)模式,下面我們就簡(jiǎn)單解讀一下iOS中單例設(shè)計(jì)模式的用法,示例代碼還是為傳統(tǒng)的Objective-C,主要為了體現(xiàn)單例模式的思想,需要的朋友可以參考下2016-05-05解決Flutter出現(xiàn)CocoaPods報(bào)錯(cuò)情況(Mac和IOS)
這篇文章主要為大家介紹了解決Flutter出現(xiàn)CocoaPods報(bào)錯(cuò)情況(Mac和IOS)的方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08