iOS WKWebView與JS交互

本篇主要給大家分享的是OC版的WKWebView與JS的交互.,Swift版本請(qǐng)查看Swift WKWebView與JS交互.

我還寫(xiě)了另外一篇,綜合UIWebView與WKWebView與JS交互的文章.歡迎收藏.
iOS OC與JS交互(WebView監(jiān)聽(tīng)事件)

在iOS 8以后,是不是有很多小伙伴把UIWebView轉(zhuǎn)為WKWebView,同樣的之前在UIWebView與JS通信的方法也需要換成WKWebView中的處理方式.那么下面我就分享一下WKWebView與JS的交互.

一. WKWebView調(diào)用JS

總之一行代碼搞定:

[webView evaluateJavaScript:@"我是JS" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
  
}];

首先使用WKWebView.你需要導(dǎo)入WebKit #import <WebKit/WebKit.h>
然后初始化一個(gè)WKWebView,設(shè)置WKNavigationDelegate,并且執(zhí)行WKNavigationDelegate的方法.在網(wǎng)頁(yè)加載成功的時(shí)候,我們會(huì)調(diào)用一些JS代碼對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置.

WKWebView本身提供一個(gè)方法進(jìn)行處理JS代碼.
javaScriptString:所執(zhí)行的JS代碼
completionHandler:回調(diào)

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

使用以上方法,在網(wǎng)頁(yè)加載完成的時(shí)候進(jìn)行操作.
例如我要獲取一個(gè)標(biāo)簽的內(nèi)容.標(biāo)簽如下.

<input style="display:none;" name="input"  value='I am Input'/>
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    //設(shè)置JS
    NSString *inputValueJS = @"document.getElementsByName('input')[0].attributes['value'].value";
    //執(zhí)行JS
    [webView evaluateJavaScript:inputValueJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"value: %@ error: %@", response, error);
    }];
}

通過(guò)以上操作就成功獲取到input標(biāo)簽的value屬性值了.如果報(bào)錯(cuò),可以通過(guò)error進(jìn)行相應(yīng)的錯(cuò)誤處理.
其實(shí)也可以設(shè)置一些JS對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置.

下面附帶一點(diǎn)簡(jiǎn)單的JS代碼.

//獲取標(biāo)簽內(nèi)容
document.getElementsByName('name')[0].value
document.getElementById('id').value
//獲取標(biāo)簽?zāi)硞€(gè)屬性
document.getElementsByName('name')[0].attributes['attribute'].value
document.getElementById('name').attributes['attribute'].value

注:通過(guò)name獲取的是個(gè)數(shù)組,可能有多個(gè),方法名Elements是個(gè)復(fù)數(shù),不要忘了寫(xiě)s,我之前就被坑過(guò).

二.運(yùn)行時(shí)加載JS代碼

使用此方法的時(shí)候,WKWebView的初始化方法就要使用如下方法,設(shè)置配置.

- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;

注入需要執(zhí)行的代碼.

NSString *js = @"I am JS Code";
//初始化WKUserScript對(duì)象
//WKUserScriptInjectionTimeAtDocumentEnd為網(wǎng)頁(yè)加載完成時(shí)注入
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
//根據(jù)生成的WKUserScript對(duì)象,初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
[_wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL"]]];
[self.view addSubview:_webView];

上邊假如有一些JS操作執(zhí)行,這個(gè)時(shí)候就觸發(fā)它的另一個(gè)代理WKUIDelegate的回調(diào)方法.

//在JS端調(diào)用alert函數(shù)時(shí),會(huì)觸發(fā)此代理方法罢维。
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
 
//JS端調(diào)用confirm函數(shù)時(shí)谒养,會(huì)觸發(fā)此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
 
//JS端調(diào)用prompt函數(shù)時(shí)渗常,會(huì)觸發(fā)此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

以上方法需要在方法的結(jié)束寫(xiě)上回調(diào).

completionHandler();

三.JS調(diào)用OC

當(dāng)JS端想傳一些數(shù)據(jù)給iOS.那它們會(huì)調(diào)用下方方法來(lái)發(fā)送.

window.webkit.messageHandlers.<方法名>.postMessage(<數(shù)據(jù)>)

上方代碼在JS端寫(xiě)會(huì)報(bào)錯(cuò),導(dǎo)致網(wǎng)頁(yè)后面業(yè)務(wù)不執(zhí)行.可使用try-catch執(zhí)行.

那么在OC中的處理方法如下.它是WKScriptMessageHandler的代理方法.name和上方JS中的方法名相對(duì)應(yīng).

- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

具體如下:

//設(shè)置addScriptMessageHandler與name.并且設(shè)置<WKScriptMessageHandler>協(xié)議與協(xié)議方法
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"方法名"];

//WKScriptMessageHandler協(xié)議方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    //code
}

到目前為止,已經(jīng)可以檢測(cè)到JS傳來(lái)的數(shù)據(jù)了.但是控制器不走-dealloc方法.

四.JS調(diào)用OC 內(nèi)存泄露處理

關(guān)于內(nèi)存泄露問(wèn)題.此處參考:使用WKWebView替換UIWebView
思路是另外創(chuàng)建一個(gè)代理對(duì)象,然后通過(guò)代理對(duì)象回調(diào)指定的self.

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>

@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;

@end

@implementation WeakScriptMessageDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate
{
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

使用時(shí),只需要將原本的self修改為WeakScriptMessageDelegate的一個(gè)實(shí)例就行了.

//設(shè)置addScriptMessageHandler與name.并且設(shè)置<WKScriptMessageHandler>協(xié)議與協(xié)議方法
[[_webView configuration].userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"方法名"];

最后我們創(chuàng)建的代理要在控制器的-dealloc方法中銷毀.

- (void)dealloc {
    ...
    [[_webView configuration].userContentController removeScriptMessageHandlerForName:@"方法名"];
    ...
}

好了,以上就是我分享的內(nèi)容了.有什么不對(duì)的地方,或者不全面的地方還請(qǐng)各位大神指點(diǎn)~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末累提,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子磁浇,更是在濱河造成了極大的恐慌斋陪,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件置吓,死亡現(xiàn)場(chǎng)離奇詭異无虚,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)衍锚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門友题,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人戴质,你說(shuō)我怎么就攤上這事度宦。” “怎么了置森?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵斗埂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我凫海,道長(zhǎng)呛凶,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任行贪,我火速辦了婚禮漾稀,結(jié)果婚禮上模闲,老公的妹妹穿的比我還像新娘。我一直安慰自己崭捍,他們只是感情好尸折,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著殷蛇,像睡著了一般实夹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粒梦,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天亮航,我揣著相機(jī)與錄音,去河邊找鬼匀们。 笑死缴淋,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的泄朴。 我是一名探鬼主播重抖,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼祖灰!你這毒婦竟也來(lái)了钟沛?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤局扶,失蹤者是張志新(化名)和其女友劉穎讹剔,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體详民,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年陌兑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了沈跨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡兔综,死狀恐怖饿凛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情软驰,我是刑警寧澤涧窒,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站锭亏,受9級(jí)特大地震影響纠吴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜慧瘤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一戴已、第九天 我趴在偏房一處隱蔽的房頂上張望固该。 院中可真熱鬧,春花似錦糖儡、人聲如沸伐坏。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)桦沉。三九已至,卻和暖如春金闽,著一層夾襖步出監(jiān)牢的瞬間纯露,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工呐矾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留苔埋,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓蜒犯,卻偏偏與公主長(zhǎng)得像组橄,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子罚随,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前言 關(guān)于UIWebView的介紹,相信看過(guò)上文的小伙伴們潮改,已經(jīng)大概清楚了吧狭郑,如果有問(wèn)題,歡迎提問(wèn)汇在。 本文是本系列...
    Dark_Angel閱讀 28,872評(píng)論 67 291
  • 上一篇文章講解了WKWebView如何加載一個(gè)簡(jiǎn)單的靜態(tài)html頁(yè)面翰萨。下面,講解如何如js端交互糕殉。 一.關(guān)于Mes...
    秦萍健閱讀 801評(píng)論 0 5
  • 一.WKWebView的特性 1.在性能亩鬼、穩(wěn)定性、功能方面有很大提升(最直觀的體現(xiàn)就是加載網(wǎng)頁(yè)是占用的內(nèi)存阿蝶,模擬器...
    秦萍健閱讀 444評(píng)論 0 4
  • 1.1 WKScriptMessageHandler協(xié)議 WKScriptMessageHandler其實(shí)就是一個(gè)...
    Kasign閱讀 7,149評(píng)論 0 11
  • 前言 關(guān)于UIWebView的介紹雳锋,相信看過(guò)上文的小伙伴們,已經(jīng)大概清楚了吧羡洁,如果有問(wèn)題玷过,歡迎提問(wèn)。 本文是本系列...
    CoderLF閱讀 8,965評(píng)論 2 12