前言
之前没有仔细接触过H5的接入，一直以为只需要放url进webView就不用管了。现在有需求需要接入H5页面，发现并没有这么简单，还需要跟JS进行交互，完成一定功能，如获取当前页面的titel，点击跳转后的titel等。这里只是记录下简单的JS交互过程。
JS和oc进行交互的方式有很多，这里主要是介绍使用JavaScriptCore桥接JS和oc，使JS能够调用oc的原生方法。过程中碰到了内存泄漏的情况，后来使用model注入的方法解决了。
上代码
WebViewDemoViewController.h
#import <UIKit/UIKit.h>
@interface WebViewDemoViewController : UIViewController
@end
WebViewDemoViewController.m
#import "WebViewDemoViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import "MedicalFormulaJSModel.h"
@interface WebViewDemoViewController ()<UIWebViewDelegate,MedicalFormulaJSModelDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, weak) JSContext *context;
@end
@implementation WebViewDemoViewController
-(void)dealloc {
NSLog(@"销毁了webview");
}
- (void)viewDidLoad {
[super viewDidLoad];
[self.navigationItem setHidesBackButton:YES];
UIBarButtonItem *leftBtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"backArrow"] style:UIBarButtonItemStylePlain target:self action:@selector(backClick)];
[self.navigationItem setLeftBarButtonItem:leftBtn];
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
self.webView.delegate = self;
NSURL *url = [NSURL URLWithString:@"http://www.test.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
self.webView.scalesPageToFit = YES;
[self.webView loadRequest:request];
[self.view addSubview:self.webView];
[self.navigationItem setTitle:@"医学公式"];
// Do any additional setup after loading the view.
}
- (void)backClick {
if (self.webView.canGoBack) {
[self.webView goBack];
[self.navigationItem setTitle:@"医学公式"];
}
else {
if (self.navigationController.childViewControllers.count > 1) {
[self.navigationController popViewControllerAnimated:YES];
}
else {
return;
}
}
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//通过模型注入，防止内存泄漏
MedicalFormulaJSModel *model = [MedicalFormulaJSModel new];
self.context[@"ClientJS"] = model;
model.jsContext = self.context;
model.webView = self.webView;
[model setDelegate:self];
self.context.exceptionHandler =
^(JSContext *context, JSValue *exceptionValue)
{
context.exception = exceptionValue;
NSLog(@"%@", exceptionValue);
};
}
- (void)webViewDidStartLoad:(UIWebView *)webView {
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
return YES;
}
//实现回调方法，设置titel
- (void)MedicalFormulaJSModelDelegateCallBack_titel:(NSString *)titel {
[self.navigationItem setTitle:titel];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@end
解释WebViewDemoViewController.m
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//通过模型注入，防止内存泄漏
MedicalFormulaJSModel *model = [MedicalFormulaJSModel new];
self.context[@"ClientJS"] = model;
model.jsContext = self.context;
model.webView = self.webView;
[model setDelegate:self];
self.context.exceptionHandler =
^(JSContext *context, JSValue *exceptionValue)
{
context.exception = exceptionValue;
NSLog(@"%@", exceptionValue);
};
}
1.documentView.webView.mainFrame.javaScriptContext这个Path是别的大神那边扒来的，大家通用的获取JSContext的路径
2.ClientJS是和web前端约定好的JS和oc桥接的桥梁对象，通过将这个桥梁对象注入iOS端的webView，JS前端就可以通过这个桥梁对象去调用原生应用的方法
3.MedicalFormulaJSModel是为了防止内存泄漏而创建的注入model，因为如果不使用注入model的话直接将JSContext注入VC
self.context[@"ClientJS"] = self;
这样JSContext环境引用控制器self，在退出控制器的时候，因为控制器self被JSContext引用而不释放，而JSContext只有等控制器释放了才能随之释放，所以就引起了循环引用，造成内存泄露。可以通过dealloc方法查看控制器有没有被释放。
MedicalFormulaJSModel.h
//
// MedicalFormulaJSModel.h
// MintmedicalSDK
//
// Created by jasonwang on 16/8/16.
// Copyright © 2016年 JasonWang. All rights reserved.
// js注入模型 防止内存泄漏
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@class UIWebView;
@protocol MintMedicalDocToolWebViewSExportProtocol <JSExport> //这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
//方法名需要和web前端协商定好一样，否则调用不到
- (void)getToolName:(NSString *)title;
@end
@protocol MedicalFormulaJSModelDelegate <NSObject> //模型的回调方法
- (void)MedicalFormulaJSModelDelegateCallBack_titel:(NSString *)titel;
@end
@interface MedicalFormulaJSModel : NSObject <MintMedicalDocToolWebViewSExportProtocol>
@property (nonatomic, weak)id<MedicalFormulaJSModelDelegate> delegate;
@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@end
解释MedicalFormulaJSModel.h
1.MintMedicalDocToolWebViewSExportProtocol交互方法协议这个协议必须要遵守JSExport协议，与JS有交互的方法写在里面
@protocol MintMedicalDocToolWebViewSExportProtocol <JSExport> //这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
//方法名需要和web前端协商定好一样，否则调用不到
- (void)getToolName:(NSString *)title;
@end
2.model遵守上面自定义的协议
@interface MedicalFormulaJSModel : NSObject <MintMedicalDocToolWebViewSExportProtocol>
MedicalFormulaJSModel.m
#import "MedicalFormulaJSModel.h"
@implementation MedicalFormulaJSModel
- (void)getToolName:(NSString *)title{
if ([self.delegate respondsToSelector:@selector(MedicalFormulaJSModelDelegateCallBack_titel:)]) {
[self.delegate MedicalFormulaJSModelDelegateCallBack_titel:title];
}
}
@end
参考
Objective-C与JavaScript交互的那些事
JavaScript和Objective-C交互的那些事(续)
iOS与JS交互实战篇（ObjC版）
