這篇文章主要為大家展示了“如何使用WKWebView、WebView和JS實(shí)現(xiàn)交互”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用WKWebView、WebView和JS實(shí)現(xiàn)交互”這篇文章吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、織金網(wǎng)站維護(hù)、網(wǎng)站推廣。

由于Xcode8發(fā)布之后，編譯器開(kāi)始不支持iOS 7了，這樣我們的app也改為最低支持iOS 8.0，既然需要與web交互，那自然也就選擇使用了 iOS 8.0之后 才推出的新控件 WKWebView.

相比與 UIWebView, WKWebView 存在很多優(yōu)勢(shì)：

• 支持更多的HTML5的特性

• 高達(dá)60fps滾動(dòng)刷新頻率與內(nèi)置手勢(shì)

• 與Safari相容的JavaScript引擎

• 在性能、穩(wěn)定性方面有很大提升占用內(nèi)存更少 協(xié)議方法及功能都更細(xì)致

• 可獲取加載進(jìn)度等。

UIWebView與JS的交互方式

一，OC調(diào)用JS

直接調(diào)用蘋(píng)果提供的API

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用方式：

OC部分：

[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

 JS部分：

function add(a,b) {
 return a+b;
}

二，JS調(diào)用OC

OC處理JS的時(shí)機(jī)在UIWebView的代理方法內(nèi)

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

使用方式：

JS部分：

function btnClick1() {
 location.href = "jsCallBack://method_?param1¶m2"
}

 OC部分：

NSString *schem = webView.request.URL.scheme;
 if ([schem containsString:@"jsCallBack://"]) {
 //action...
 return NO;
 }

WKWebView與JS的交互方式

一，OC調(diào)用JS

調(diào)用蘋(píng)果提供的API

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

使用方式：

OC部分：

[self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

 JS部分：

function playSount() {
 //playSount...
}

二，JS調(diào)用OC

OC部分：

這種使用方式比較麻煩一些

1.在創(chuàng)建wkWebView時(shí)，需要將被js調(diào)用的方法注冊(cè)進(jìn)去

//創(chuàng)建WKWebViewConfiguration文件
 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
 config.preferences.minimumFontSize = 10.f;
 [config.userContentController addScriptMessageHandler:self name:@"playSound"];
//創(chuàng)建WKWebView類
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

 2.在WKScriptMessageHandler代理方法中監(jiān)聽(tīng)js的調(diào)用

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
 
 if ([message.name isEqualToString:@"playSound"]) {
  [self playSound];
 }
}

 JS部分：

//JS響應(yīng)事件
function btnClick() { window.webkit.messageHandlers.playSound.postMessage(null);
}

利用JavaScriptCore庫(kù)，WebView與JS的交互

一，OC調(diào)用JS

self.jsContent = [[JSContext alloc] init];
 
NSString *js = @"function add(a,b) {return a + b}";
[self.jsContent evaluateScript:js];
JSValue *jsValue = [self.jsContent[@"add"] callWithArguments:@[@2,@3]];

二，JS調(diào)用OC

self.jsContent = [[JSContext alloc] init];
self.jsContent[@"add"] = ^(int a, int b){
 NSLog(@"a+b = %d",a+b);
};
 
[self.jsContent evaluateScript:@"add(10,20)"];

三，JS直接訪問(wèn)OC對(duì)象方法與屬性

1.首先定義一個(gè)協(xié)議，這個(gè)協(xié)議遵守JSExport協(xié)議

@protocol JSExportTest 
@property (nonatomic, assign) NSInteger sum;
JSExportAs(add, - (NSInteger)add:(int)a b:(int)b);
 
@end

其中JSExportAs（）是系統(tǒng)提供的宏，用來(lái)聲明在JS環(huán)境中方法add與OC環(huán)境中方法- (NSInteger)add:(int)a b:(int)b對(duì)應(yīng)。

2.創(chuàng)建一類，遵守JSExportTest協(xié)議，并實(shí)現(xiàn)它什么的方法與屬性

@interface JSProtolObj : NSObject 
@end
@implementation JSProtolObj
@synthesize sum = _sum;
- (NSInteger)add:(int)a b:(int)b {
 return a+b;
}
 
- (void)setSum:(NSInteger)sum {
 _sum = sum;
}
@end

3.使用方式：

self.jsContent = [[JSContext alloc] init];
self.jsContent.exceptionHandler = ^(JSContext *context, JSValue *exception) {
 [JSContext currentContext].exception = exception;
 NSLog(@"exception:%@",exception);
};
 
self.jsContent[@"OCobj"] = self.jsProtolObj;
[self.jsContent evaluateScript:@"OCobj.sum = OCobj.add(10,20)"];

這三種使用方式可以根據(jù)實(shí)際情況進(jìn)行適當(dāng)使用

以上是“如何使用WKWebView、WebView和JS實(shí)現(xiàn)交互”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！