iOs遷至WKWebView跨過的一些坑
前言
在iOS中有兩種網(wǎng)頁視圖可以加載網(wǎng)頁除了系統(tǒng)的那個控制器。一種是UIWebView,另一種是WKWebView,其實WKWebView就是想替代UIWebView的,因為我們都知道UIWebView非常占內存等一些問題,但是現(xiàn)在很多人還在使用UIWebView這是為啥呢?而且官方也宣布在iOS12中廢棄了UIWebView讓我們盡快使用WKWebView。其實也就是這些東西:**頁面尺寸問題、JS交互、請求攔截、cookie帶不上的問題。**所以有時想要遷移還得解決這些問題,所以還是很煩的,所以一一解決嘍。
頁面尺寸的問題
我們知道有些網(wǎng)頁在UIWebView上顯示好好地,使用WKWebView就會出現(xiàn)尺寸的問題,這時很納悶,安卓也不會,你總不說是前端的問題吧?但其實是WKWebView中網(wǎng)頁是需要適配一下,所以自己添加JS吧,當然和前端關系好就可以叫他加的。下面通過設置配置中的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來進行交互非常的方便。在JavaScriptCore中有三者比較常用那就是JSContext(上下文)、JSValue(類型轉換)、JSExport(js調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端調用alertMessage時就會跑到這里來!");
};
// 帶參數(shù)的,值必須進行轉換
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可以直接調用object中的方法,并且需要把函數(shù)名取個別名。在JS端可以調用getS,OC可以繼續(xù)使用這個getSum這個方法 @protocol OMProtocol <JSExport> // 協(xié)議 - 協(xié)議方法 JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2); @end
在WKWebView中如何做呢?
不能像上面那樣,系統(tǒng)提供的是通過以下兩種方法,所以是比較難受,而且還得前端使用messageHandler來調用,即安卓和iOS分開處理。
// 直接調用js
NSString *jsStr = @"var arr = [3, '3', 'abc']; ";
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
// 下面是注冊名稱后,js使用messageHandlers調用了指定名稱就會進入到代理中
// OC我們添加了js名稱后
- (void)viewDidLoad{
//...
[wkUController addScriptMessageHandler:self name:@"showtime"];
configuration.userContentController = wkUController;
}
// JS中messageHandlers調用我們在OC中的名稱一致時就會進入后面的到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);
}];
// 調用JS
dispatch_async(dispatch_get_global_queue(0, 0), ^{
[self.wjb callHandler:@"OCCallJSFunction" data:@"OC調用JS" responseCallback:^(id responseData) {
NSLog(@"currentThread == %@",[NSThread currentThread]);
NSLog(@"調用完JS后的回調:%@",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進行攔截做自定義邏輯處理。但是這種方法不是很靈活,于是就使用NSURLProtocol來進行攔截,例如微信攔截淘寶一樣,直接顯示一個提示。又或者是攔截請求調用本地的接口,打開相機、錄音、相冊等功能。還能直接攔截后改變原有的request,直接返回數(shù)據(jù)或者其他的url,在一些去除廣告時可以的用得上。
我們使用的時候必須要使用NSURLProtocol的子類來進行一些操作。并在使用前需要注冊自定義的Class。攔截后記得進行標記一下,防止自循環(huán)多執(zhí)行??上У氖窃赪KWebView中不能進行攔截后處理的操作,只能監(jiān)聽卻改變不了。源于WKWebView采用的是webkit加載,和系統(tǒng)的瀏覽器一樣的機制。
// 子類 @interface OMURLProtocol : NSURLProtocol<NSURLSessionDataDelegate> @property (nonatomic, strong) NSURLSession *session; @end // 注冊 [NSURLProtocol registerClass:[OMURLProtocol class]];
// 1. 首先會在這里來進行攔截,返回YES則表示需要經過我們自定義處理,NO則走系統(tǒng)處理 + (BOOL)canInitWithRequest:(NSURLRequest *)request; // 2.攔截處理將會進入下一個環(huán)節(jié), 返回一個標準化的request,可以在這里進行重定向 + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request; // 3.是否成功攔截都會走這個方法, 可以在這里進行一些自定義處理 - (void)startLoading; // 4. 任何網(wǎng)絡請求都會走上面的攔截處理,即使我們重定向后還會再走一次或多次流程,需要標記來處理 // 根據(jù)request獲取標記值來決定是否需要攔截,在canInitWithRequest內處理 + (nullable id)propertyForKey:(NSString *)key inRequest:(NSURLRequest *)request; // 標記 + (void)setProperty:(id)value forKey:(NSString *)key inRequest:(NSMutableURLRequest *)request; // 移除標記 + (void)removePropertyForKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
請求頭或數(shù)據(jù)混亂問題
還需要注意的一點是,如果實現(xiàn)線了攔截處理的話,我們在使用AFN和URLSession進行訪問的時候攔截會發(fā)現(xiàn)數(shù)據(jù)或請求頭可能和你攔截處理后的數(shù)據(jù)或請求不符合預期,這是因為我們在攔截的時候只是先請求了A后請求了B,這是不符合預期的,雖然URLConnection不會但是已被廢棄不值得提倡使用。我們通過在攔截的時候通過LLDB打印session中配置的協(xié)議時,發(fā)現(xiàn)是這樣的沒有包含我們自定義的協(xié)議,我們通過Runtime交換方法交換protocolClasses方法,我們實現(xiàn)我們自己的protocolClasses方法。但是為了保證系統(tǒng)原有的屬性,我們應該在系統(tǒng)原有的協(xié)議表上加上我們的協(xié)議類。在當前我們雖然可以通過[NSURLSession sharedSession].configuration.protocolClasses;獲取系統(tǒng)默認的協(xié)議類,但是如果我們在當前自定義的類里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)已經加上我們自定義的協(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的攜帶問題
很多應用場景中需要使用session來進行處理,在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];
// 添加一個分類來修復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);
}
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對我們的支持。
上一篇:沒有了
欄 目:IOS
下一篇:iOS常見宏理解及使用方法
本文標題:iOs遷至WKWebView跨過的一些坑
本文地址:http://www.jygsgssxh.com/a1/IOS/11884.html
您可能感興趣的文章
- 01-11iOS常用算法之兩個有序數(shù)組合并(要求時間復雜度為0(n))
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11iOS調試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)方法


閱讀排行
本欄相關
- 01-11UILabel顯示定時器文本跳動問題的解決
- 01-11iOS常用算法之兩個有序數(shù)組合并(要
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11詳解MacOs免密登錄CentOs操作步驟
- 01-11iOS動態(tài)更換Icon的全過程記錄
- 01-11iOS調試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)境設置
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實例總結


