iOs遷至WKWebView跨過的一些坑
前言
在iOS中有兩種網(wǎng)頁視圖可以加載網(wǎng)頁除了系統(tǒng)的那個控制器。一種是UIWebView,另一種是WKWebView,其實WKWebView就是想替代UIWebView的,因為我們都知道UIWebView非常占內(nèi)存等一些問題,但是現(xiàn)在很多人還在使用UIWebView這是為啥呢?而且官方也宣布在iOS12中廢棄了UIWebView讓我們盡快使用WKWebView。其實也就是這些東西:**頁面尺寸問題、JS交互、請求攔截、cookie帶不上的問題。**所以有時想要遷移還得解決這些問題,所以還是很煩的,所以一一解決嘍。
頁面尺寸的問題
我們知道有些網(wǎng)頁在UIWebView上顯示好好地,使用WKWebView就會出現(xiàn)尺寸的問題,這時很納悶,安卓也不會,你總不說是前端的問題吧?但其實是WKWebView中網(wǎng)頁是需要適配一下,所以自己添加JS吧,當(dāng)然和前端關(guān)系好就可以叫他加的。下面通過設(shè)置配置中的userContentController來添加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來進(jìn)行交互非常的方便。在JavaScriptCore中有三者比較常用那就是JSContext(上下文)、JSValue(類型轉(zhuǎn)換)、JSExport(js調(diào)OC模型方法)。
在UIWebView中的便利交互方法
//JSContext就為其提供著運行環(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方法,需要注意的是添加的方法會覆蓋原有的JS方法,因為我們是在網(wǎng)頁加載成功后獲取上下文來操作的。 // 無參數(shù)的 self.jsContext[@"alertMessage"] = ^() { NSLog(@"JS端調(diào)用alertMessage時就會跑到這里來!"); }; // 帶參數(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中的對象重新賦值 OMJSObject *omObject = [[OMJSObject alloc] init]; self.jsContext[@"omObject"] = omObject; NSLog(@"omObject == %d",[omObject getSum:20 num2:40]); // 我們都知道object必須要遵守JSExport協(xié)議時,js可以直接調(diào)用object中的方法,并且需要把函數(shù)名取個別名。在JS端可以調(diào)用getS,OC可以繼續(xù)使用這個getSum這個方法 @protocol OMProtocol <JSExport> // 協(xié)議 - 協(xié)議方法 JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2); @end
在WKWebView中如何做呢?
不能像上面那樣,系統(tǒng)提供的是通過以下兩種方法,所以是比較難受,而且還得前端使用messageHandler來調(diào)用,即安卓和iOS分開處理。
// 直接調(diào)用js NSString *jsStr = @"var arr = [3, '3', 'abc']; "; [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) { NSLog(@"%@----%@",result, error); }];
// 下面是注冊名稱后,js使用messageHandlers調(diào)用了指定名稱就會進(jìn)入到代理中 // OC我們添加了js名稱后 - (void)viewDidLoad{ //... [wkUController addScriptMessageHandler:self name:@"showtime"]; configuration.userContentController = wkUController; } // JS中messageHandlers調(diào)用我們在OC中的名稱一致時就會進(jìn)入后面的到OC的代理 window.webkit.messageHandlers.showtime.postMessage(''); // 代理,判斷邏輯 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ if ([message.name isEqualToString:@"showtime"]) { NSLog(@"來了!"); } NSLog(@"message == %@ --- %@",message.name,message.body); } // 最后在dealloc必須移除 [self.userContentController removeScriptMessageHandlerForName:@"showtime"];
//如果是彈窗的必須自己實現(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]; }
一直用一直爽的交互
我們上面寫了兩者的一些交互,雖然可以用呢,但是沒有帶一種很簡單很輕松的境界,所以有一個開源庫:WebViewJavaScriptBridge。這個開源庫可以同時兼容兩者,而且交互很簡單,但是你必須得前端一起,否則就哦豁了。
// 使用 self.wjb = [WebViewJavascriptBridge bridgeForWebView:self.webView]; // 如果你要在VC中實現(xiàn) UIWebView的代理方法 就實現(xiàn)下面的代碼(否則省略) [self.wjb setWebViewDelegate:self]; // 注冊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); }]; });
前端使用實例如下,具體使用方法可以查看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) }) })
請求攔截
我們UIWebView在早期是使用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
來根據(jù)scheme、host、pathComponents進(jìn)行攔截做自定義邏輯處理。但是這種方法不是很靈活,于是就使用NSURLProtocol來進(jìn)行攔截,例如微信攔截淘寶一樣,直接顯示一個提示。又或者是攔截請求調(diào)用本地的接口,打開相機、錄音、相冊等功能。還能直接攔截后改變原有的request,直接返回數(shù)據(jù)或者其他的url,在一些去除廣告時可以的用得上。
我們使用的時候必須要使用NSURLProtocol的子類來進(jìn)行一些操作。并在使用前需要注冊自定義的Class。攔截后記得進(jìn)行標(biāo)記一下,防止自循環(huán)多執(zhí)行??上У氖窃赪KWebView中不能進(jìn)行攔截后處理的操作,只能監(jiān)聽卻改變不了。源于WKWebView采用的是webkit加載,和系統(tǒng)的瀏覽器一樣的機制。
// 子類 @interface OMURLProtocol : NSURLProtocol<NSURLSessionDataDelegate> @property (nonatomic, strong) NSURLSession *session; @end // 注冊 [NSURLProtocol registerClass:[OMURLProtocol class]];
// 1. 首先會在這里來進(jìn)行攔截,返回YES則表示需要經(jīng)過我們自定義處理,NO則走系統(tǒng)處理 + (BOOL)canInitWithRequest:(NSURLRequest *)request; // 2.攔截處理將會進(jìn)入下一個環(huán)節(jié), 返回一個標(biāo)準(zhǔn)化的request,可以在這里進(jìn)行重定向 + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request; // 3.是否成功攔截都會走這個方法, 可以在這里進(jìn)行一些自定義處理 - (void)startLoading; // 4. 任何網(wǎng)絡(luò)請求都會走上面的攔截處理,即使我們重定向后還會再走一次或多次流程,需要標(biāo)記來處理 // 根據(jù)request獲取標(biāo)記值來決定是否需要攔截,在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;
請求頭或數(shù)據(jù)混亂問題
還需要注意的一點是,如果實現(xiàn)線了攔截處理的話,我們在使用AFN和URLSession進(jìn)行訪問的時候攔截會發(fā)現(xiàn)數(shù)據(jù)或請求頭可能和你攔截處理后的數(shù)據(jù)或請求不符合預(yù)期,這是因為我們在攔截的時候只是先請求了A后請求了B,這是不符合預(yù)期的,雖然URLConnection不會但是已被廢棄不值得提倡使用。我們通過在攔截的時候通過LLDB打印session中配置的協(xié)議時,發(fā)現(xiàn)是這樣的沒有包含我們自定義的協(xié)議,我們通過Runtime交換方法交換protocolClasses方法,我們實現(xiàn)我們自己的protocolClasses方法。但是為了保證系統(tǒng)原有的屬性,我們應(yīng)該在系統(tǒng)原有的協(xié)議表上加上我們的協(xié)議類。在當(dāng)前我們雖然可以通過[NSURLSession sharedSession].configuration.protocolClasses;獲取系統(tǒng)默認(rèn)的協(xié)議類,但是如果我們在當(dāng)前自定義的類里protocolClasses寫的話會造成死循環(huán),因為我們交換了該屬性的getter方法。我們使用保存類名然后存儲至NSUserDefaults,取值時在還原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; } // 我們再次打印時發(fā)現(xiàn)已經(jīng)加上我們自定義的協(xié)議類了 po session.configuration.protocolClasses <__NSArrayM 0x60000041a4f0>( _NSURLHTTPProtocol, _NSURLDataProtocol, _NSURLFTPProtocol, _NSURLFileProtocol, NSAboutURLProtocol, OMURLProtocol )
// 存儲系統(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:@"沒有這個方法 無法交換"]; } method_exchangeImplementations(originalMethod, stubMethod); }
Cookie的攜帶問題
很多應(yīng)用場景中需要使用session來進(jìn)行處理,在UIWebView中很容易做到攜帶這些Cookie,但是由于WKWebView的機制不一樣,跨域會出現(xiàn)丟失cookie的情況是很糟糕的。目前有兩種用法:腳本和手動添加cookie。腳本不太靠譜,建議使用手動添加更為保險。
// 使用腳本來添加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];
// 添加一個分類來修復(fù)cookie丟失的問題 @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 // 使用場景 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { [navigationAction.request fixCookie]; decisionHandler(WKNavigationActionPolicyAllow); }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對我們的支持。
上一篇:沒有了
欄 目:IOS
下一篇:iOS常見宏理解及使用方法
本文標(biāo)題:iOs遷至WKWebView跨過的一些坑
本文地址:http://mengdiqiu.com.cn/a1/IOS/11884.html
您可能感興趣的文章
- 01-11iOS常用算法之兩個有序數(shù)組合并(要求時間復(fù)雜度為0(n))
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11iOS調(diào)試Block引用對象無法被釋放的小技巧分享
- 01-11iOS動態(tài)更換Icon的全過程記錄
- 01-11iOS實現(xiàn)文本分頁的方法示例
- 01-11iOS常見宏理解及使用方法
- 01-11iOS模擬中獎名單循環(huán)滾動效果
- 01-11Python一鍵查找iOS項目中未使用的圖片、音頻、視頻資源
- 01-11iOS中如何獲取某個視圖的截圖詳析
- 01-11iOS13適配的實現(xiàn)方法


閱讀排行
本欄相關(guān)
- 01-11UILabel顯示定時器文本跳動問題的解決
- 01-11iOS常用算法之兩個有序數(shù)組合并(要
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11詳解MacOs免密登錄CentOs操作步驟
- 01-11iOS動態(tài)更換Icon的全過程記錄
- 01-11iOS調(diào)試Block引用對象無法被釋放的小技
- 01-11iOS常見宏理解及使用方法
- 01-11iOS實現(xiàn)文本分頁的方法示例
- 01-11iOs遷至WKWebView跨過的一些坑
- 01-11iOS模擬中獎名單循環(huán)滾動效果
隨機閱讀
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實例總結(jié)