在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="width: 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 内存泄露
但是这样WebView所在的ViewController的- (void)dealloc{}不执行.那么内存又有问提了.
可以另外创建一个代理对象，然后通过代理对象回调指定的self.
//.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
设置代理
[[_webView configuration].userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"方法名"];
WebView的ViewController的- (void)dealloc{}方法中进行销毁.
- (void)dealloc {
...
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"方法名"];
...
}
----------END
当然,安卓开发的盆友也是可以通过这种方式从中获取网页的数据的.安卓注入的接口名称在JS中也是会报错的.因此也需要try-catch.
好了.以上就是与大家分享的OC与JS交互(WebView监听事件).有不足之处还请各位大佬指出.万分感激~
