首先看下JS部分的代碼
<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>Page Title</title><script>// 如果是使用UIWebView的話,使用這個測試調起原生暴露的方法? ? ? ? function callIosMethod() {? ? ? ? ? ? // log();? ? ? ? ? ? // logString('這個是傳進來的字符串');? ? ? ? ? ? logWithCallBack('這是一個帶回調的傳進的字符串', function(params0,param1) {? ? ? ? ? ? ? ? var str = params0 + param1;? ? ? ? ? ? ? ? alert(str);? ? ? ? ? ? });? ? ? ? }? ? ? ? // WKWebView? ? ? ? function callWKMethod() {? ? ? ? ? ? // 注意,logWithCallBack為原生暴露的方法名,必須要與原生代碼中的對應? ? ? ? ? ? // 參數部分可以通過postMessage的參數傳遞? ? ? ? ? ? window.webkit.messageHandlers.logWithCallBack.postMessage({"key" : "value", "callback" : "111"});? ? ? ? }? ? ? ? // 供原生調用的測試方法(理論來說,只要是在這里寫的public方法,都算是暴露出來的方法,都可以調用)? ? ? ? function exportToIos() {? ? ? ? ? ? alert('iOS調起了JS方法');? ? ? ? }? ? ? ? function exportToIosWithArguement(arguement) {? ? ? ? ? ? alert(arguement);? ? ? ? }? ? ? ? function methodWithThreeArguements(arg1, arg2) {? ? ? ? ? ? alert(arg1 + arg2);? ? ? ? }</script><style>p {? ? ? ? background-color: #ff3333;? ? ? ? color: #fff;? ? ? ? padding: 10px, 10px;? ? ? ? display: inline-block;? ? }</style></head><body><ponclick="callIosMethod()">我是個按鈕</p><ponclick="callWKMethod()">測試WKWebView點這個<p/></body></html>
UIWebView部分代碼
-(void)viewDidLoad{[superviewDidLoad];// 此處我的webView為xib拖得,省去了初始化webView的代碼// 加載本地html文件NSString*path=@"/Users/liuxu/Desktop/H5學習代碼/index.html";NSURL*url=[NSURL fileURLWithPath:path];[self.webView loadRequest:[NSURLRequest requestWithURL:url]];self.webView.delegate=self;// 獲取當前webview的JSContextself.jsContext=[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];// 暴露方法供H5調用 // 無參數self.jsContext[@"log"]=^(){NSLog(@"hahhahahhaha");};// 一個參數self.jsContext[@"logString"]=^(NSString*str){NSLog(@"%@",str);};// 有回調self.jsContext[@"logWithCallBack"]=^(NSString*str,JSValue*value){NSLog(@"%@",str);[value callWithArguments:@[@"1",@"2"]];};}// 調用JS的方法-(IBAction)callJS:(id)sender{// 設置異常處理,此步驟不能省略[self.jsContext setExceptionHandler:^(JSContext*context,JSValue*exception){}];// 無參數//? ? [self.jsContext evaluateScript:@"exportToIos()"];// 有參數[self.jsContext evaluateScript:@"exportToIosWithArguement('lalala')"];}
效果圖如下
1.點擊頁面上的'callJS'按鈕
點擊頁面上的CallJS按鈕.png
2.點擊H5頁面上的'我是個按鈕',控制臺輸出'這是一個帶回調的傳進的字符串',隨后觸發回調部分的代碼
點擊我是個按鈕.png
WKWebView部分代碼
#import"WKWebViewController.h"#import#import@interfaceWKWebViewController()<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>@property(strong,nonatomic)WKWebView*webView;@end@implementationWKWebViewController-(void)viewDidLoad{[superviewDidLoad];WKWebViewConfiguration*configuration=[[WKWebViewConfiguration alloc]init];WKUserContentController*userContentController=[[WKUserContentController alloc]init];// 注入方法[userContentController addScriptMessageHandler:selfname:@"log"];[userContentController addScriptMessageHandler:selfname:@"logString"];[userContentController addScriptMessageHandler:selfname:@"logWithCallBack"];configuration.userContentController=userContentController;self.webView=[[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];self.webView.UIDelegate=self;self.webView.navigationDelegate=self;[self.view insertSubview:self.webView atIndex:0];NSString*path=@"/Users/liuxu/Desktop/H5學習代碼/index.html";NSURL*url=[NSURL fileURLWithPath:path];[self.webView loadRequest:[NSURLRequest requestWithURL:url]];}// 調用JS暴露出的方法-(IBAction)callJS:(id)sender{NSString*js=@"exportToIos()";[self.webView evaluateJavaScript:js completionHandler:nil];}// 用于攔截alert方法，實現該方法后可以js可以正常調用alert方法-(void)webView:(WKWebView*)webView runJavaScriptAlertPanelWithMessage:(NSString*)message initiatedByFrame:(WKFrameInfo*)frame completionHandler:(void(^)(void))completionHandler{UIAlertController*alertController=[UIAlertController alertControllerWithTitle:nil message:message?:@""preferredStyle:UIAlertControllerStyleAlert];[alertController addAction:([UIAlertAction actionWithTitle:@"確認"style:UIAlertActionStyleDefault handler:^(UIAlertAction*_Nonnull action){completionHandler();}])];[selfpresentViewController:alertController animated:YES completion:nil];}// JS調用原生注入的方法后會走該方法,可以在此處判斷并進行相應操作-(void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message{NSDictionary*dict=message.body;if([message.name isEqualToString:@"log"]){}elseif([message.name isEqualToString:@"logString"]){}elseif([message.name isEqualToString:@"logStringWithCallBack"]){}}-(void)dealloc{[self.webView.configuration.userContentController removeAllUserScripts];}@end
