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ù)組、字符串、字典,如果沒參數(shù)的話需要傳個(gè)null,不傳的話iOS端會(huì)收不到方法的調(diào)用

3、oc獲取js傳過來的值

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

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

方法二:利用windows.location.href
1、js利用windows.location.href='gotoActive://'方式調(diào)用oc方法
gotoActive是js跟oc雙方商量好的,//后面可以帶上參數(shù)字符串
2、oc可以通過攔截URL的方式來獲取到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"]){
        //通過URL.scheme來判斷是js通過哪個(gè)方法來調(diào)用的
        decisionHandler(WKNavigationActionPolicyCancel);
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

通過URL.scheme來判斷是js通過哪個(gè)方法來調(diào)用的,參數(shù)就可以通過截取url來獲得。decisionHandler(WKNavigationActionPolicyCancel);是用來阻止界面展示的,因?yàn)閖s調(diào)用方法時(shí)url并不是一個(gè)真的網(wǎng)頁地址,所以需要阻止去加載這個(gè)假的網(wǎng)頁地址,如果不阻止的話就會(huì)跳轉(zhuǎn)一個(gè)新的網(wǎng)頁,而且加載網(wǎng)頁失敗。decisionHandler(WKNavigationActionPolicyAllow);就是用來允許加載網(wǎng)頁的方法
方法三:利用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è)按鈕,通過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è)確定按鈕的,通過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];
}

可以通過這三個(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容