iOS WKWebview OC與JS交互

WKWebView和UIWebView的區別

總結起來幾點:

  • 內存占用變小
  • 支持更多的HTML5特性
  • 高刷新
  • Safari相同的JavaScript引擎
  • 加載速度變快

參考

配置 \color{#aa0000}{WKWebview}

  • WKWebViewConfiguration

WKProcessPool:當前所屬進程池

// 當前所屬進程池
// WKProcessPool用來配置進程池,與網頁視圖的資源共享有關
@property (nonatomic, strong) WKProcessPool *processPool;

WKPreferences:偏好設置

// 偏好設置
@property (nonatomic, strong) WKPreferences *preferences;

WKPreferences-> propertys
//最小字體
@property (nonatomic) CGFloat minimumFontSize;
//是否可以打開沒有用戶交互的窗口
@property (nonatomic) BOOL javaScriptCanOpenWindowsAutomatically;
// 是否應警告可疑性的欺詐內容,(釣魚網站或惡意軟件)
@property (nonatomic, getter=isFraudulentWebsiteWarningEnabled) BOOL fraudulentWebsiteWarningEnabled API_AVAILABLE(macos(10.15), ios(13.0));

//是否開啟文字互動
@property (nonatomic) BOOL textInteractionEnabled API_AVAILABLE(macos(11.3), ios(14.5));

WKUserContentController:OC與JS交互

@property (nonatomic, strong) WKUserContentController *userContentController;

WKWebsiteDataStore:網頁使用到的數據管理類

@property (nonatomic, strong) WKWebsiteDataStore *websiteDataStore API_AVAILABLE(macos(10.11), ios(9.0));
指示網絡視圖是否在【內容渲染完全加載到內存之前】禁止內容呈現,默認是NO。
@property (nonatomic) BOOL suppressesIncrementalRendering;

在用戶代理字符串中使用的應用程序的名稱。
@property (nullable, nonatomic, copy) NSString *applicationNameForUserAgent API_AVAILABLE(macos(10.11), ios(9.0));

是否支持airplay
@property (nonatomic) BOOL allowsAirPlayForMediaPlayback API_AVAILABLE(macos(10.11), ios(9.0));

枚舉類型,需要用戶手勢開始播放的媒體類型
@property (nonatomic) WKAudiovisualMediaTypes mediaTypesRequiringUserActionForPlayback API_AVAILABLE(macos(10.12), ios(10.0));

默認網頁偏好設置
@property (null_resettable, nonatomic, copy) WKWebpagePreferences *defaultWebpagePreferences API_AVAILABLE(macos(10.15), ios(13.0));

限制app跳轉
@property (nonatomic) BOOL limitsNavigationsToAppBoundDomains API_AVAILABLE(macos(11.0), ios(14.0));

指示HTML5視頻是否內嵌播放,或使用native全屏控制器。
@property (nonatomic) BOOL allowsInlineMediaPlayback;

設置選擇粒度 用戶可以在網頁視圖中交互地選擇內容的粒度級別。
@property (nonatomic) WKSelectionGranularity selectionGranularity;

HTML5視圖是否可以播放畫中畫
@property (nonatomic) BOOL allowsPictureInPictureMediaPlayback API_AVAILABLE(ios(9_0));

識別數據類型 所需的數據監測類型。
@property (nonatomic) WKDataDetectorTypes dataDetectorTypes API_AVAILABLE(ios(10.0));

用于確定WKWebView是否應始終允許縮放網頁。
@property (nonatomic) BOOL ignoresViewportScaleLimits API_AVAILABLE(ios(10.0));

#else
選擇用戶界面方向 用戶界面元素的方向。
@property (nonatomic) WKUserInterfaceDirectionPolicy userInterfaceDirectionPolicy API_AVAILABLE(macos(10.12));

#endif

設置攔截的Scheme和對應回調
- (void)setURLSchemeHandler:(nullable id <WKURLSchemeHandler>)urlSchemeHandler forURLScheme:(NSString *)urlScheme API_AVAILABLE(macos(10.13), ios(11.0));

獲取scheme對應回調
- (nullable id <WKURLSchemeHandler>)urlSchemeHandlerForURLScheme:(NSString *)urlScheme API_AVAILABLE(macos(10.13), ios(11.0));

OC與JS通訊

  • 相互調用的基礎是通訊協議(方法名、參數類型),通常都是JS端和OC端根據業務邏輯來共同制定

以下代碼是對\color{#245dfe}{js}\color{#245dfe}{oc}通訊的一個簡單封裝

#import <Foundation/Foundation.h>

@protocol WAExcuteScriptDelegate <NSObject>

- (void)excuteScript:(NSString *_Nonnull)script complition:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))complition;

@end

typedef void(^MessageHandle)(id _Nonnull body, NSString * _Nonnull name);

@class WKUserContentController;

NS_ASSUME_NONNULL_BEGIN

@interface WAScriptProcesser : NSObject

@property (nonatomic, weak) id<WAExcuteScriptDelegate> excuteDelegate;
@property (nonatomic, strong) WKUserContentController *userController;

// 腳本注入
- (void)addScript:(NSString *)script
             atStart:(BOOL)atStart
         isFrameMain:(BOOL)isFrameMain;

/** oc->js
 @param script 執行js中定義的函數 :getName('name');
 @param complition 完成回調
 */
- (void)excuteScript:(NSString *)script complition:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))complition;
 
/** js->oc
 *  @param name : 注冊和  js 約定好的回調名稱
 *  @param complition 回調
 */
- (void)registerHandleWithName:(NSString *)name complition:(MessageHandle)complition;
@end

NS_ASSUME_NONNULL_END

//
//  WAScriptProcesser.m
//  JSView
//
//  Created by admin on 2021/11/12.
//

#import "WAScriptProcesser.h"
#import <WebKit/WebKit.h>


@interface WAScriptProcesser ()<WKScriptMessageHandlerWithReply,WKScriptMessageHandler>

@property (nonatomic, strong) NSMutableDictionary *handleDict;

@end



@implementation WAScriptProcesser

- (NSMutableDictionary *)handleDict
{
    if (_handleDict == nil)
    {
        _handleDict = [[NSMutableDictionary alloc] init];
    }
    return _handleDict;
}

- (WKUserContentController *)contentController
{
    if (_userController == nil)
    {
        _userController = [[WKUserContentController alloc] init];
    }
    return _userController;
}

- (void)addScript:(NSString *)script
             atStart:(BOOL)atStart
         isFrameMain:(BOOL)isFrameMain
{
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:script injectionTime:atStart?WKUserScriptInjectionTimeAtDocumentStart:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:isFrameMain];
    [self.userController addUserScript:userScript];
}

- (void)excuteScript:(NSString *)script complition:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))complition
{
    [self.excuteDelegate excuteScript:script complition:complition];
}

- (void)registerHandleWithName:(NSString *)name complition:(MessageHandle)complition
{
    [self.userController addScriptMessageHandler:self name:name];
    [self.handleDict setValue:[complition copy] forKey:name];
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message replyHandler:(void (^)(id _Nullable reply, NSString *_Nullable errorMessage))replyHandler WK_SWIFT_ASYNC(3) API_AVAILABLE(macos(11.0), ios(14.0))
{
    
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSString *name = message.name;
    id body = message.body;
    MessageHandle block  = (MessageHandle)[self.handleDict objectForKey:name];
    if (block)
    {
        block(body, name);
    }
}


@end

Scheme攔截

#import <Foundation/Foundation.h>
#import <WebKit/WebKit.h>

typedef void(^RouterHandler)(BOOL isStart, id <WKURLSchemeTask> _Nonnull urlSchemeTask, NSDictionary * _Nonnull params);

NS_ASSUME_NONNULL_BEGIN

@interface WARouter : NSObject

- (void)registerPattern:(NSString *)pattern handle:(RouterHandler)handle;

@end

NS_ASSUME_NONNULL_END


#import "WARouter.h"


@interface WARouter ()<WKURLSchemeHandler>

@property (nonatomic, strong) NSMutableDictionary *routers;

@end

@implementation WARouter

- (NSMutableDictionary *)routers
{
    if (_routers == nil)
    {
        _routers = [[NSMutableDictionary alloc] init];
    }
    return _routers;
}


- (void)registerPattern:(NSString *)pattern handle:(RouterHandler)handle
{
    [self.routers setValue:[handle copy] forKey:pattern];
}

- (void)webView:(WKWebView *)webView startURLSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask
{
    NSURL *url = urlSchemeTask.request.URL;
    
    NSString *scheme = url.scheme;
    
    NSArray *pairs = [url.query componentsSeparatedByString:@"&"];
    
    NSMutableDictionary *params = [[NSMutableDictionary alloc] init];
    for (NSString *str in pairs)
    {
        NSArray *pair = [str componentsSeparatedByString:@"="];
        [params setValue:[pair lastObject] forKey:[pair firstObject]];
    }
    
    [params addEntriesFromDictionary:urlSchemeTask.request.allHTTPHeaderFields];
    
    RouterHandler handler = [self.routers objectForKey:scheme];
    
    handler(YES, urlSchemeTask, params);
    
}

- (void)webView:(WKWebView *)webView stopURLSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask
{
    NSURL *url = urlSchemeTask.request.URL;
    
    NSString *scheme = url.scheme;
    
    NSArray *pairs = [url.query componentsSeparatedByString:@"&"];
    
    NSMutableDictionary *params = [[NSMutableDictionary alloc] init];
    for (NSString *str in pairs)
    {
        NSArray *pair = [str componentsSeparatedByString:@"="];
        [params setValue:[pair lastObject] forKey:[pair firstObject]];
    }
    
    [params addEntriesFromDictionary:urlSchemeTask.request.allHTTPHeaderFields];
    
    RouterHandler handler = [self.routers objectForKey:scheme];
    
    handler(NO, urlSchemeTask, params);
}


@end

Demo 工程

WKWebview的優化和坑,參考如下
https://juejin.cn/post/6861778055178747911
https://segmentfault.com/a/1190000039111381
https://cloud.tencent.com/developer/article/1005691

WKWebview API全解
https://cloud.tencent.com/developer/article/1485172

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內容