在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互.
首先先说第一种方法,并没有牵扯OC与JS交互,只是做拦截和跳转.
拦截跳转的URL,跳转源生界面(用起来感觉怪怪的,万一URL更换了怎么办.)
UIWebView
//UIWebViewDelegate - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *url = request.URL.absoluteString; if ([url rangeOfString:@"需要跳转源生界面的URL判断"].location != NSNotFound) { //跳转原生界面 return NO; } return YES; }
WKWebView
//使用WKWebview需要导入WebKit #import <WebKit/WebKit.h> //WKNavigationDelegate - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { NSString *url = navigationAction.request.URL.absoluteString; if ([url rangeOfString:@"需要跳转源生界面的URL判断"].location != NSNotFound) { //跳转原生界面 //Cancel the navigation decisionHandler(WKNavigationActionPolicyCancel); return; } decisionHandler(WKNavigationActionPolicyAllow); }
----------✨↓↓↓↓↓↓✨----------
OC与JS交互(WebView监听事件)
正入主题.
一.OC调用JS
1.UIWebView
①直接运行
NSString *jsStr = @"执行的JS代码"; [webView stringByEvaluatingJavaScriptFromString:jsStr];
②使用JavaScriptCore框架
#import <JavaScriptCore/JavaScriptCore.h> - (void)webViewDidFinishLoad:(UIWebView *)webView { //获取webview中的JS内容 JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; NSString *runJS = @"执行的JS代码"; //准备执行的JS代码 [context evaluateScript:runJS]; }
2.WKWebView
[webView evaluateJavaScript:@"执行的JS代码" completionHandler:^(id _Nullable response, NSError * _Nullable error) { }];
二.JS调用OC ✨✨✨✨✨✨
当网页触发某种操作,可以给App传递消息.比如WebView中购买某样东西,点击购买,需要获取这件商品的订单信息,并且需要App进行源生的支付.
这种方法需要你和后台或者前端协商好一下,让他们在执行JS方法的时候,将你需要的数据放到你能拿到的位置.
下面简单贴一个HTML文件.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>App与WebView交互</title> </head> <body> <button style=" 100%; height: 100px;" onclick="buttonClick()">点击购买</button> </body> <script> //按钮点击事件 function buttonClick() { //传递的信息 var jsonStr = '{"id":"666", "message":"我是传递的数据"}'; //UIWebView使用 getMessage(jsonStr); //WKWebView使用 //使用下方方法,会报错,为使界面执行逻辑通畅,因此使用try-catch try { window.webkit.messageHandlers.getMessage.postMessage(jsonStr) } catch(error) { console.log(error) } } function getMessage(json){ //空方法 } </script> </html>
window.webkit.messageHandlers.<方法名>.postMessage(<数据>) JS端写此方法的盆友可能会报错,导致界面逻辑无法进行,因此使用try-catch就好了.
我在网页上只写了一个按钮.点击按钮,会触发buttonClick()方法.
UIWebView
在网页加载完成的时候检测JS方法执行.
- (void)webViewDidFinishLoad:(UIWebView *)webView { //核心方法如下 JSContext *content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //此处的getMessage和JS方法中的getMessage名称一致. content[@"getMessage"] = ^() { NSArray *arguments = [JSContext currentArguments]; for (JSValue *jsValue in arguments) { NSLog(@"=======%@",jsValue); } }; }
由上方方法,当JS方法getMessage()执行的时候,此方法回调的jsValue内容就是我们需要的内容.(HTML中JS传递的数据)
WebView中的getMessage与HTML文件JS方法的getMessage名称需保持一致.
WKWebView
实现WKScriptMessageHandler的代理方法.
//设置addScriptMessageHandler与JS对应方法名.并且设置<WKScriptMessageHandler>协议与协议方法 [[_webView configuration].userContentController addScriptMessageHandler:self name:@"getMessage"]; //WKScriptMessageHandler协议方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { //code NSLog(@"name = %@, body = %@", message.name, message.body); }
上方
-addScriptMessageHandler:name:方法中name填写的方法名必须与window.webkit.messageHandlers.<方法名>.postMessage(<数据>)中的方法名一致.
当JS端执行window.webkit.messageHandlers.<方法名>.postMessage(<数据>).
此协议方法就会被执行.,根据message.name判断一下自己需要执行哪步操作.message.body即是传输的参数信息.(HTML中JS传递的数据)
WKWebView 内存泄露
如果这时候你在self的dealloc打个断点，会发现self没有释放！这显然是不行的！谷歌后看到一种解决方法，如下
思路是：可以另外创建一个代理对象，然后通过代理对象回调指定的self.
WeakScriptMessageDelegate
//.h @interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler> @property (nonatomic, assign) id<WKScriptMessageHandler> scriptDelegate; - (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate; @end
//.m @implementation WeakScriptMessageDelegate - (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate { self = [super init]; if (self) { _scriptDelegate = scriptDelegate; } return self; } - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message]; } @end
使用WeakScriptMessageDelegate 设置代理
//设置addScriptMessageHandler与name.并且设置<WKScriptMessageHandler>协议与协议方法 [[_wkWebView configuration].userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"方法名"];
//必须在 WebView的ViewController的- (void)dealloc{}方法中进行销毁. 这样才能销毁
- (void)dealloc { //... [[_webView configuration].userContentController removeScriptMessageHandlerForName:@"方法名"]; //... }
当然,安卓开发的盆友也是可以通过这种方式从中获取网页的数据的.安卓注入的接口名称在JS中也是会报错的.因此也需要try-catch.
一下是补充WKWebView用法
一、加载网页
加载网页或HTML代码的方式与UIWebView相同，代码示例如下：
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds]; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]; [self.view addSubview:webView];
二、加载的状态回调 （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;
三、新的WKUIDelegate协议
这个协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框)，下面是警告框的例子:
//在JS端调用alert函数时，会触发此代理方法。 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler; //JS端调用confirm函数时，会触发此方法 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler; //JS端调用prompt函数时，会触发此方法 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;
四、动态加载并运行JS代码
用于在客户端内部加入JS代码，并执行，示例如下：
// 图片缩放的js代码 NSString *js = @"var count = document.images.length;for (var i = 0; i < count; i++) {var image = document.images[i];image.style.width=320;};window.alert('找到' + count + '张图');"; // 根据JS字符串初始化WKUserScript对象 WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; // 根据生成的WKUserScript对象，初始化WKWebViewConfiguration WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; [config.userContentController addUserScript:script]; _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config]; [_webView loadHTMLString:@"<head></head><imgea src='http://www.nsu.edu.cn/v/2014v3/img/background/3.jpg' />"baseURL:nil]; [self.view addSubview:_webView];
目前，大多数App需要支持iOS7以上的版本，而WKWebView只在iOS8后才能用，所以需要一个兼容性方案，既iOS7下用UIWebView，iOS8后用WKWebView。这个库提供了这种兼容性方案：https://github.com/wangyangcc/IMYWebView