UIWebView－JSContext实现OC与JS交互

最近的项目中native APP提供基本的功能，部分业务放在h5中，为了提升交互体验，保证native中操作和webview中一致，需要提供Objective-C与javeScript的交互接口，也正因为项目支持版本IOS7，而IOS7以后使用javascriptcore.framework和h5的通信也相对以前简单了很多，不需要定义那么多的url shcema，可以直接通过javascriptcore完成Objective-C与javeScript的交互。

1.webView中JSContext的获取

使用 javascriptcore交互的核心是通过从webview中获取到当前的JSContext，在JSContext中执行对应的操作，一般情况下可以通过以下接口获取到当前页面的JSContext

_defaultContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

如果webview中进行了不同的页面切换，就需要在每次完成新的页面加载后，刷新当前记录的JSContext，确保JSContext实时有效。

-(void)webViewDidFinishLoad:(UIWebView *)webView {    //网页加载完成调用此方法    _defaultContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    ｝

2.Objective-C调用javeScript

这部分比较简单，第一种方案可以直接使用
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
调用javeScript提供的接口，传参。

//假设JS中提供login函数[webView stringByEvaluatingJavaScriptFromString:@"login('username','password')"];

第二种方案，使用JSContext获取对应的接口后，使用
- (JSValue *)callWithArguments:(NSArray *)arguments;
或
- (JSValue )evaluateScript:(NSString )script;

[_defaultContext evaluateScript:@"login('username','password')"];

//通过 JSContext 调用JS 方法，执行 JSValue *JSfunc =_defaultContext[@"login"];        [JSfunc callWithArguments:@[@'username',@'password']];              

3.javeScript调用Objective-C

这个需要使用javascriptcore提供的JSExport，在Objective-C中实现该protocol的方法，就可以在javeScript使用到的接口了。JSExport相当于跨语言提供的protocol。

#include <JavaScriptCore/JavaScriptCore.h>// Protocol to list bindings@protocol JSBridgeExport <JSExport>//为webview中提供与native一致的提示功能- (void)showTip:(NSString *)tip;@end@interface JSBridge : NSObject <JSBridgeExport>@end@implementation JSBridge- (void)showTip:(NSString *)tip{    [TopWindow makeToast:tip];}@end

首先将在当前JSContext进行类注册_defaultContext[@"jsbridge"] = [[JSBridge alloc]init];，然后就可以在JS中通过jsbridge调用OC提供的方法接口了。

[_defaultContext evaluateScript:@"jsbridge.showTip(\"this is a tip from webview\")"];

存在的问题

正如第一步中刷新JSContext一样，在不同页面进行刷新后的时候，都需要将OC提供给JS的方法进行注册，确保当前JS环境中提供的接口有效。

-(void)webViewDidFinishLoad:(UIWebView *)webView {    //网页加载完成调用此方法    //刷新当前记录JSContext，刷新接口    _defaultContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    _defaultContext[@"jsbridge"] = [[JSBridge alloc]init];    }