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(類(lèi)型轉(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è)名稱(chēng)后,js使用messageHandlers調(diào)用了指定名稱(chēng)就會(huì)進(jìn)入到代理中
// OC我們添加了js名稱(chēng)后
- (void)viewDidLoad{
//...
[wkUController addScriptMessageHandler:self name:@"showtime"];
configuration.userContentController = wkUController;
}
// JS中messageHandlers調(diào)用我們?cè)贠C中的名稱(chēng)一致時(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];
}
一直用一直爽的交互
我們上面寫(xiě)了兩者的一些交互,雖然可以用呢,但是沒(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方法名稱(chēng)
[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)來(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ī)制。
// 子類(lèi) @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é)議類(lèi)。在當(dāng)前我們雖然可以通過(guò)[NSURLSession sharedSession].configuration.protocolClasses;獲取系統(tǒng)默認(rèn)的協(xié)議類(lèi),但是如果我們?cè)诋?dāng)前自定義的類(lèi)里protocolClasses寫(xiě)的話會(huì)造成死循環(huán),因?yàn)槲覀兘粨Q了該屬性的getter方法。我們使用保存類(lèi)名然后存儲(chǔ)至NSUserDefaults,取值時(shí)在還原class。
po session.configuration.protocolClasses <__NSArrayI 0x600001442d00>( _NSURLHTTPProtocol, _NSURLDataProtocol, _NSURLFTPProtocol, _NSURLFileProtocol, NSAboutURLProtocol )
// 自定義返回我們的協(xié)議類(lèi)
- (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é)議類(lèi)了
po session.configuration.protocolClasses
<__NSArrayM 0x60000041a4f0>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol,
OMURLProtocol
)
// 存儲(chǔ)系統(tǒng)原有的協(xié)議類(lèi)
+ (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é)議類(lèi)
+ (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)來(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-07
ios7中UIViewControllerBasedStatusBarAppearance作用詳解
這篇文章主要介紹了 ios7中UIViewControllerBasedStatusBarAppearance作用詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
iOS 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-02
iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果
這篇文章主要介紹了iOS使用UICollectionView實(shí)現(xiàn)列表頭部拉伸效果,OC和Swift兩個(gè)版本,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
iOS中指紋識(shí)別常見(jiàn)問(wèn)題匯總
最近在公司做了一個(gè)app要使用指紋支付的功能,在實(shí)現(xiàn)過(guò)程中遇到各種坑,今天小編抽抗給大家總結(jié)把遇到問(wèn)題匯總特此分享到腳本之家平臺(tái),需要的朋友參考下2016-12-12
IOS購(gòu)物車(chē)界面實(shí)現(xiàn)效果示例
本篇文章主要介紹了IOS購(gòu)物車(chē)界面實(shí)現(xiàn)效果示例,有需要了解的朋友可參考。希望此文章對(duì)各位有所幫助。2017-02-02
iOS 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

