WKWebView與js的交互

一JS調(diào)用OC的方法

方法一:利用WKUserContentController
1琼富、先在OC這邊注冊(cè)方法給js調(diào)用

self.webConfig = [[WKWebViewConfiguration alloc] init];
self.wkwebview = [[WKWebView alloc] initWithFrame:CGRectZero configuration:self.webConfig];
// 提供方法給js調(diào)用
[self.webConfig.userContentController addScriptMessageHandler:self name:@"gotoActive"];

gotoActive是oc與js約定好的方法盘榨,js需要調(diào)用這個(gè)方法給oc傳值

2顶燕、js調(diào)用oc方法傳值

window.webkit.messageHandlers.gotoActive.postMessage();

gotoActive是oc與js約定好的方法,括號(hào)里就是寫js給oc傳的值党涕,可以傳數(shù)組吻谋、字符串辽幌、字典增淹,如果沒(méi)參數(shù)的話需要傳個(gè)null,不傳的話iOS端會(huì)收不到方法的調(diào)用

3乌企、oc獲取js傳過(guò)來(lái)的值

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"js調(diào)用的方法:%@",message.name);
    NSLog(@"js傳過(guò)來(lái)的數(shù)據(jù):%@",message.body);
}

在js調(diào)用了oc的方法后虑润,會(huì)在這個(gè)方法里獲取到j(luò)s調(diào)用的oc的方法和js傳過(guò)來(lái)的值

方法二:利用windows.location.href
1、js利用windows.location.href='gotoActive://'方式調(diào)用oc方法
gotoActive是js跟oc雙方商量好的加酵,//后面可以帶上參數(shù)字符串
2拳喻、oc可以通過(guò)攔截URL的方式來(lái)獲取到j(luò)s調(diào)用iOS

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    
    // 獲取url
    NSURLRequest * request = navigationAction.request;
    NSString * requestStr = request.URL.absoluteString;
    NSLog(@"URL:%@",requestStr);
    
    if ([request.URL.scheme isEqualToString:@"gotoActive"]){
        //通過(guò)URL.scheme來(lái)判斷是js通過(guò)哪個(gè)方法來(lái)調(diào)用的
        decisionHandler(WKNavigationActionPolicyCancel);
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

通過(guò)URL.scheme來(lái)判斷是js通過(guò)哪個(gè)方法來(lái)調(diào)用的哭当,參數(shù)就可以通過(guò)截取url來(lái)獲得。decisionHandler(WKNavigationActionPolicyCancel);是用來(lái)阻止界面展示的冗澈,因?yàn)閖s調(diào)用方法時(shí)url并不是一個(gè)真的網(wǎng)頁(yè)地址钦勘,所以需要阻止去加載這個(gè)假的網(wǎng)頁(yè)地址,如果不阻止的話就會(huì)跳轉(zhuǎn)一個(gè)新的網(wǎng)頁(yè)亚亲,而且加載網(wǎng)頁(yè)失敗彻采。decisionHandler(WKNavigationActionPolicyAllow);就是用來(lái)允許加載網(wǎng)頁(yè)的方法
方法三:利用js調(diào)用彈窗的方式
js想要在WKWebview上彈窗就需要oc調(diào)用三個(gè)相關(guān)代理去監(jiān)測(cè),在監(jiān)測(cè)到j(luò)s有調(diào)用彈窗的方法時(shí)就會(huì)觸發(fā)oc相關(guān)的代理
首先要設(shè)置WKWebView的代理

self.webView.UIDelegate = self;

實(shí)現(xiàn)三個(gè)代理方法

// 顯示一個(gè)按鈕捌归。點(diǎn)擊后調(diào)用completionHandler回調(diào)
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

        completionHandler();
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
}

// 顯示兩個(gè)按鈕肛响,通過(guò)completionHandler回調(diào)判斷用戶點(diǎn)擊的確定還是取消按鈕
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        
        completionHandler(YES);
    }]];
    [alertController addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        
        completionHandler(NO);
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
    
}

// 顯示一個(gè)帶有輸入框和一個(gè)確定按鈕的,通過(guò)completionHandler回調(diào)用戶輸入的內(nèi)容
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:nil preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        
    }];
    [alertController addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        
        completionHandler(alertController.textFields.lastObject.text);
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
}

可以通過(guò)這三個(gè)代理方法實(shí)現(xiàn)與js的交互,還可以實(shí)現(xiàn)給js返回值

二OC調(diào)用JS的方法

方法一

    NSString * str = [NSString stringWithFormat:@"setAddress('%@','%@','%@')",dic[@"longitude"],dic[@"latitude"],dic[@"address"]];
    
    [self.wkwebview evaluateJavaScript:str completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
        
    }];

setAddress是js的方法,括號(hào)里的就是js方法的參數(shù)

方法二

JSContext * context = [self.wkwebview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSValue * action = context[@"getImg"];
[action callWithArguments:@[@"參數(shù)"]];

getImg是js的方法粗悯,利用callWithArguments方法進(jìn)行傳參

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市雹有,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌臼寄,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件溜宽,死亡現(xiàn)場(chǎng)離奇詭異吉拳,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)适揉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門留攒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人嫉嘀,你說(shuō)我怎么就攤上這事炼邀。” “怎么了剪侮?”我有些...
    開封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵拭宁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我瓣俯,道長(zhǎng)杰标,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任彩匕,我火速辦了婚禮腔剂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘驼仪。我一直安慰自己掸犬,他們只是感情好袜漩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著湾碎,像睡著了一般宙攻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胜茧,一...
    開封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天粘优,我揣著相機(jī)與錄音,去河邊找鬼呻顽。 笑死雹顺,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的廊遍。 我是一名探鬼主播嬉愧,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼喉前!你這毒婦竟也來(lái)了没酣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤卵迂,失蹤者是張志新(化名)和其女友劉穎裕便,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體见咒,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡偿衰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了改览。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片下翎。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖宝当,靈堂內(nèi)的尸體忽然破棺而出视事,到底是詐尸還是另有隱情,我是刑警寧澤庆揩,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布俐东,位于F島的核電站,受9級(jí)特大地震影響订晌,放射性物質(zhì)發(fā)生泄漏犬性。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一腾仅、第九天 我趴在偏房一處隱蔽的房頂上張望乒裆。 院中可真熱鬧,春花似錦推励、人聲如沸鹤耍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)稿黄。三九已至喊衫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間杆怕,已是汗流浹背族购。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陵珍,地道東北人寝杖。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像互纯,于是被迫代替她去往敵國(guó)和親瑟幕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

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