iOS的WebView和JS的交互

iOS中调用HTML

1. 加载网页
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

 

2. 删除
    NSString *str1 = @"var word = document.getElementById('word');";
    NSString *str2 = @"word.remove();";
    
    [webView  stringByEvaluatingJavaScriptFromString:str1];
    [webView  stringByEvaluatingJavaScriptFromString:str2];

3. 更改
    NSString *str3 = @"var change = document.getElementsByClassName('change')[0];"
                       "change.innerHTML = '好你的哦!';";
    [webView stringByEvaluatingJavaScriptFromString:str3];

 

4.  插入
    NSString *str4 =@"var img = document.createElement('img');"
                     "img.src = 'img_01.jpg';"
                     "img.width = '160';"
                     "img.height = '80';"
                     "document.body.appendChild(img);";
    [webView stringByEvaluatingJavaScriptFromString:str4];

 5. 改变标题
    NSString *str1 = @"var h1 = document.getElementsByTagName('h1')[0];"
                      "h1.innerHTML='简书啊啊啊啊';";
    [webView stringByEvaluatingJavaScriptFromString:str1];   
    
    
6. 删除尾部
    NSString *str2 =@"document.getElementById('footer').remove();";
    [webView stringByEvaluatingJavaScriptFromString:str2];
    
7. 拿出所有的网页内容
    NSString *str3 = @"document.body.outerHTML";
    NSString *html = [webView stringByEvaluatingJavaScriptFromString:str3];
    NSLog(@"%@", html);

 在HTML中调用OC

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *str = request.URL.absoluteString;
    NSRange range = [str rangeOfString:@"ZJY://"];
    if (range.location != NSNotFound) {
        NSString *method = [str substringFromIndex:range.location + range.length];
        SEL sel = NSSelectorFromString(method);
        [self performSelector:sel];
    }
    return YES;
}

// 访问相册
- (void)getImage{
    UIImagePickerController *pickerImg = [[UIImagePickerController alloc]init];
    pickerImg.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    [self presentViewController:pickerImg animated:YES completion:nil];
}

 JavaScriptCore 使用，首先需要导入<JavaScriptCore/JavaScriptCore.h>框架

   JSContext *context = [[JSContext alloc] init];
    
    NSString *js = @"function add(a,b){return a+b;}";
    
    [context evaluateScript:js];
    
    context[@"add"]=^(int a,int b)
    {
        
        
        NSLog(@"======%d,%d\n",a,b);
        
    };
    
    
    [context evaluateScript:@"add(4,5)"];
    
    JSValue *value = [context[@"add"] callWithArguments:@[@1,@2]];

    NSLog(@"======%d\n",[value toInt32]);

通过JSExport protocol: 去实现

//定义一个JSExport protocol
@protocol JSExportTest <JSExport>

- (NSInteger)add:(NSInteger)a b:(NSInteger)b;

@property (nonatomic, assign) NSInteger sum;

@end

 

@interface JSProtocolObj : NSObject<JSExportTest>
@end

@implementation JSProtocolObj
@synthesize sum = _sum;
//实现协议方法
- (NSInteger)add:(NSInteger)a b:(NSInteger)b
{
    return a+b;
}
//重写setter方法方便打印信息，
- (void)setSum:(NSInteger)sum
{
    NSLog(@"--%@", @(sum));
    _sum = sum;
}

@end

//在VC中进行测试
@interface ViewController () <JSExportTest>

@property (nonatomic, strong) JSProtocolObj *obj;
@property (nonatomic, strong) JSContext *context;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建context
    self.context = [[JSContext alloc] init];
    //设置异常处理
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        [JSContext currentContext].exception = exception;
        NSLog(@"exception:%@",exception);
    };
    //将obj添加到context中
    self.context[@"OCObj"] = self.obj;
    //JS里面调用Obj方法，并将结果赋值给Obj的sum属性
    [self.context evaluateScript:@"OCObj.sum = OCObj.addB(2,3)"];

}

 内存管理，对于OC内存管理使用的是ARC，JS的内存管理是垃圾回收机制，JS中的循环引用会有垃圾回收帮忙打破

下面的注意点，不要在block中里面直接使用context，或者使用外面的JSvalue

 

//错误代码：
self.context[@"block"] = ^(){
     JSValue *value = [JSValue valueWithObject:@"aaa" inContext:self.context];
};
这个代码，不用自己看了，编译器都会提示你的。这个block里面使用self，很容易就看出来了。

//一个比较隐蔽的
     JSValue *value = [JSValue valueWithObject:@"ssss" inContext:self.context];

    self.context[@"log"] = ^(){
        NSLog(@"%@",value);
    };
这个是block里面使用了外部的value，value对context和它管理的JS对象都是强引用。这个value被block所捕获，这边同样也会内存泄露，context是销毁不掉的。

//正确的做法，str对象是JS那边传递过来。
self.context[@"log"] = ^(NSString *str){
        NSLog(@"%@",str);
    };

 

• 线程:JavaScriptCore 线程是安全的，每个context运行的时候通过lock关联的JSVirtualMachine。如果要进行并发操作，可以创建多个JSVirtualMachine实例进行操作。

在UIWebView的finish的回调中进行获取

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

}