Objective-C与JavaScript的交互

iOS原生应用和Wed页面的交互大致有以下几种方法：

• iOS 7之后的JavaScriptCore
• 拦截协议
• 第三方框架（WebViewScriptBridge）
• iOS 8之后的WKWebView

UIWebViewDelegate委托协议定义的方法

• webView:shouldStartLoadWithRequest:navigationType:。该方法在WebView开始加载新的界面之前调用，可以用来捕获- - WebView中的JavaScript事件。
• webViewDidStartLoad:。该方法在WebView开始加载新的界面之后调用。
• webViewDidFinishLoad:。该方法在WebView完成加载新的界面之后调用。
• webView:didFailLoadWithError:。该方法在WebView加载失败时调用。

Objective-C执行JavaScript代码

相关方法

// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL

相关应用

用这些方法去执行大段的JavaScript代码是没什么必要的，但是有些小场景用起来还是比较顺手和实用的，列举两个例子作为参考：

// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
 
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];

JavaScriptCore

web前端

        

              
Objective-C和JavaScript交互的那些事
              
         
         

                
          

iOS

JavaScriptCore中类及协议：

• JSContext:给JavaScript提供运行的上下文环境
• JSValue：JavaScript和Objective-C数据和方法的桥梁
• JSManagedValue：管理数据和方法的类
• JSVirtualMachine：处理线程相关，使用较少
• JSExport：这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议

viewController中的代码

#import "ViewController.h"
#import 
 
@protocol JSObjcDelegate 
//注意该协议要遵守协议
- (void)callCamera;
- (void)share:(NSString *)shareString;
 
@end
 
@interface ViewController () 
 
@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
 
@end
 
@implementation ViewController
 
#pragma mark - Life Circle
 
- (void)viewDidLoad {
    [super viewDidLoad];
     
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
    [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
}
 
#pragma mark - UIWebViewDelegate
 
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"Toyun"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
}
 
#pragma mark - JSObjcDelegate
 
- (void)callCamera {
    NSLog(@"callCamera");
    // 获取到照片之后在回调js的方法picCallback把图片传出去
    JSValue *picCallback = self.jsContext[@"picCallback"];
    [picCallback callWithArguments:@[@"photos"]];
}
 
- (void)share:(NSString *)shareString {
    NSLog(@"share:%@", shareString);
    // 分享成功回调js的方法shareCallback
    JSValue *shareCallback = self.jsContext[@"shareCallback"];
    [shareCallback callWithArguments:nil];
}
 
@end

ViewController中的代码解释

自定义JSObjcDelegate协议，而且此协议必须遵守JSExport这个协议，自定义协议中的方法就是暴露给web页面的方法。在webView加载完毕的时候获取JavaScript运行的上下文环境，然后再注入桥梁对象名为Toyun，承载的对象为self即为此控制器，控制器遵守此自定义协议实现协议中对应的方法。在JavaStript调用完本地应用的方法做完相对应的事情之后，又回调了JavaStript中对应的方法，从而实现了web页面和本地应用之间的通讯。

JavaScriptCore使用注意

JavaStript调用本地方法是在子线程中执行的，这里要根据实际情况考虑线程之间的切换，而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaStript方法的代码，我在实际运用中开始没注意，就被坑惨了啊。什么，说的太绕，看下面的代码解释：

//  假设此方法是在子线程中执行的，线程名sub-thread
- (void)callCamera {     
    // 这句假设要在主线程中执行，线程名main-thread
    NSLog(@"callCamera");
       
    // 下面这两句代码最好还是要在子线程sub-thread中执行啊
    JSValue *picCallback = self.jsContext[@"picCallback"];
    [picCallback callWithArguments:@[@"photos"]];
}

运行效果如下：

112.jpg

拦截协议

拦截协议这个适合一些比较简单的一些情况，不需要引入什么框架，只需要web前端配合一下就好。但是在具体调用哪一个方法上，以及在传值的时候可能会有些不方便，而且调用完后无法在回调JavaScript的方法。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    if ([url rangeOfString:@"toyun://"].location != NSNotFound) { 
        // url的协议头是Toyun
        NSLog(@"callCamera");
        return NO;
    }
    return YES;
}

iOS对应的代码的解释

在webView的代理方法中去拦截自定义的协议Toyun://如果是此协议则据此判断JavaStript想要做的事情，调用原生应用的方法，这些都是提前约定好的，同时阻止此链接的跳转。
转自：
Objective-C与JavaScript交互的那些事