ios中webView和JavaScript交互总结

前言:js交互问题在很多app种都能用到,面试中也经常被问到,我做的项目中也用到了交互,今天就总结下,希望能帮助到有需要的人.

js交互页面.png

上图中就是我所做的app中涉及到交互的页面,点击不同的按钮能跳转到不同的页面,下面做具体的分析.

理论段落
在ios7以前,苹果还没有推出JavaScriptCore的时候,我们对js的操作只有在webview里面的一个函数stringByEvaluatingJavaScriptFromString,js对oc的回调都是基于URL的拦截进行的操作,一般我们都借用一些三方库,我当时用的是WebViewJavascriptBridge.那在ios7之后,我们对js的操作就会相对方便.我先介绍几个关键词
JSContext:JS的执行环境,是通过JSVirtualMachine管理这所有对象的生命周期,每个JSValue都和JSContext相关联着
JSValue: JS对象在JSVirtualMachine中的一个强引用.我们对JS的操作都是通过它的.并且每个JSValue都强引用这一个JSContext.同时OC和JS对象之间的转换也是通过它.
JSVirtualMachine: JS运行的虚拟机,有独立的堆空间和垃圾回收机制.
JSExport:一个协议,如果JS想直接调用oc对象里面的方法和属性,那么这个OC对象只需要实现这个JSExport协议方法就可以
============================我是分割线=============================

1.OC调用JS(我们不在通过URL拦截,我们直接取UIWebView的context,然后进行js操作)

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [SVProgressHUD dismiss];
    
    //oc通过stringByEvaluatingJavaScriptFromString这个方法来调用js的
    self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    //获取js的上下文
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //给js传用户id
    [self appToJs:@"user_id" data:SALFSTR(User_ID)];
    //给js传版本号
    [self appToJs:@"versionCode" data:[UIApplication sharedApplication].appVersion];
    //给js传token
    [self appToJs:@"token" data:SALFSTR(User_Token)];
    
    //设置 app 交互代理
    self.context[@"app"] = self;
    
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        //打印异常信息
        NSLog(@"异常信息：%@", exceptionValue);
    };
}
//交互的方法
- (void)appToJs:(NSString *)type data:(NSString *)data{
    
    NSString * H5Str = [NSString stringWithFormat:@"appToJs('%@','%@')",type,data];
    [self.context evaluateScript:H5Str];
    
}

2.JS调用OC有两种方法:block和JSExport协议,我用的是后者

.h文件中
#import "BaseViewController.h"
#import 

@protocol HomeWebViewJSExport 

//协议方法
- (void)js:(NSString *)type App:(NSString *)data;

@end

@interface HomeWebViewController : BaseViewController

@property(strong,nonatomic)NSString *webUrl;

@end
.m文件中 主要是对协议方法的实现
- (void)js:(NSString *)type App:(NSString *)data {
    
    NSLog(@"%@ %@",type,data);
    
    dispatch_async(dispatch_get_main_queue(), ^{
        
        if ([type isEqualToString:@"scenic"]) {
            //进入景区详情
            [self jumpScenicViewWithID:data];
        }else if ([type isEqualToString:@"url"]){
            //进入专题页
            [self pushToBannerWithID:data];
        }
    }); 
}

参考资料:葵花宝典书籍.