溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹ios中OC與JS交互之WKWebView的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
一、WKWebView Framework
WKWebView的14個類與3個協議：
WKBackForwardList: 之前訪問過的 web 頁面的列表，可以通過后退和前進動作來訪問到。
WKBackForwardListItem: webview 中后退列表里的某一個網頁。
WKFrameInfo: 包含一個網頁的布局信息。
WKNavigation: 包含一個網頁的加載進度信息。
WKNavigationAction: 包含可能讓網頁導航變化的信息，用于判斷是否做出導航變化。
WKNavigationResponse: 包含可能讓網頁導航變化的返回內容信息，用于判斷是否做出導航變化。
WKPreferences: 概括一個 webview 的偏好設置。
WKProcessPool: 表示一個 web 內容加載池。
WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。
WKScriptMessage: 包含網頁發出的信息。
WKUserScript: 表示可以被網頁接受的用戶腳本。
WKWebViewConfiguration: 初始化 webview 的設置。
WKWindowFeatures: 指定加載新網頁時的窗口屬性。
WKWebsiteDataStore: 包含網頁數據存儲和查找。
WKNavigationDelegate: 提供了追蹤主窗口網頁加載過程和判斷主窗口和子窗口是否進行頁面加載新頁面的相關方法。
WKUIDelegate: 提供用原生控件顯示網頁的方法回調。
WKScriptMessageHandler: 提供從網頁中收消息的回調方法。
二、WKWebView中的三個代理方法
1. WKNavigationDelegate
該代理提供的方法，可以用來追蹤加載過程（頁面開始加載、加載完成、加載失敗）、決定是否執行跳轉。
// 頁面開始加載時調用 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation; // 當內容開始返回時調用 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation; // 頁面加載完成之后調用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation; // 頁面加載失敗時調用 - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
頁面跳轉的代理方法有三種，分為（收到跳轉與決定是否跳轉兩種）
// 接收到服務器跳轉請求之后調用 - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; // 在收到響應后，決定是否跳轉 - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; // 在發送請求之前，決定是否跳轉 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
2. WKUIDelegate
創建一個新的WKWebView
// 創建一個新的WebView - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
剩下三個代理方法全都是與界面彈出提示框相關的，針對于web界面的三種提示框（警告框、確認框、輸入框）分別對應三種代理方法。
// 界面彈出警告框 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler; // 界面彈出確認框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler; // 界面彈出輸入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
3. WKScriptMessageHandler
這個協議中包含一個必須實現的方法，這個方法是native與web端交互的關鍵，它可以直接將接收到的JS腳本轉為OC或Swift對象。
// 從web界面中接收到一個腳本時調用 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
三、使用WKWebView重寫
這里我們和之前的界面做了一點改動，之前OC調用JS的時候是進行彈框處理，這里我在寫的時候，很郁悶，方法可以調用過去，但是唯獨js的alert方法調用沒有效果，所以這里采用了輸出到div的形式，并增加了一個clear按鈕
WKWebView不支持nib文件，所以這里需要使用代碼初始化并加載WebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; config.preferences.minimumFontSize = 18; self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/2) configuration:config]; [self.view addSubview:self.wkWebView]; NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL *baseURL = [[NSBundle mainBundle] bundleURL]; [self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
OC端：
//1. JS調用OC 添加處理腳本
[userCC addScriptMessageHandler:self name:@"showMobile"];
[userCC addScriptMessageHandler:self name:@"showName"];
[userCC addScriptMessageHandler:self name:@"showSendMsg"];
// 在代理方法中處理對應事件
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"%@",NSStringFromSelector(_cmd));
NSLog(@"%@",message.body);
if ([message.name isEqualToString:@"showMobile"]) {
[self showMsg:@"我是下面的小紅 手機號是:18870707070"];
}
if ([message.name isEqualToString:@"showName"]) {
NSString *info = [NSString stringWithFormat:@"你好 %@, 很高興見到你",message.body];
[self showMsg:info];
}
if ([message.name isEqualToString:@"showSendMsg"]) {
NSArray *array = message.body;
NSString *info = [NSString stringWithFormat:@"這是我的手機號: %@, %@ !!",array.firstObject,array.lastObject];
[self showMsg:info];
}
}
// 2. native調用js
- (IBAction)btnClick:(UIButton *)sender {
if (!self.wkWebView.loading) {
if (sender.tag == 123) {
[self.wkWebView evaluateJavaScript:@"alertMobile()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
//TODO
NSLog(@"%@ %@",response,error);
}];
}
if (sender.tag == 234) {
[self.wkWebView evaluateJavaScript:@"alertName('小紅')" completionHandler:nil];
}
if (sender.tag == 345) {
[self.wkWebView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil];
}
} else {
NSLog(@"the view is currently loading content");
}
}JS端：
function clear() {
document.getElementById('mobile').innerHTML = ''
document.getElementById('name').innerHTML = ''
document.getElementById('msg').innerHTML = ''
}
//OC調用JS的方法列表
function alertMobile() {
//這里已經調用過來了 但是搞不明白為什么alert方法沒有響應
//alert('我是上面的小黃 手機號是:13300001111')
document.getElementById('mobile').innerHTML = '我是上面的小黃 手機號是:13300001111'
}
function alertName(msg) {
//alert('你好 ' + msg + ', 我也很高興見到你')
document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高興見到你'
}
function alertSendMsg(num,msg) {
//window.alert('這是我的手機號:' + num + ',' + msg + '!!')
document.getElementById('msg').innerHTML = '這是我的手機號:' + num + ',' + msg + '!!'
}
//JS響應方法列表
function btnClick1() {
window.webkit.messageHandlers.showMobile.postMessage(null)
}
function btnClick2() {
window.webkit.messageHandlers.showName.postMessage('xiao黃')
}
function btnClick3() {
window.webkit.messageHandlers.showSendMsg.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])
}以上是“ios中OC與JS交互之WKWebView的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
