在開發(fā)中APP端嵌入了越來越多的html網(wǎng)頁辉懒，html頁面已經(jīng)不僅僅滿足展示功能阳惹，還需要能與原生語言進(jìn)行交互、相互傳值眶俩。今天就寫個(gè)簡單的Demo 記錄下JS和OC之間的互相調(diào)用莹汤， 運(yùn)行成功后的界面如下：
交互界面.png
需要達(dá)到：
- 點(diǎn)擊HTML頁面上的按鈕，能調(diào)用OC方法颠印；
- 點(diǎn)擊VC上的按鈕纲岭，能調(diào)用JS方法。
實(shí)現(xiàn)代碼
- 首先導(dǎo)入事先寫好的HTML文件, 內(nèi)容大致如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h2>JS與OC交互</h2>
<input type="button" value="JS調(diào)用OC-1" onclick="call()">
</div>
<script>
var call = function()
{
var callInfo = JSON.stringify('JS調(diào)用OC');
callBackToOC(callInfo);
}
var ocClick = function (str)
{
alert(str);
}
</script>
</body>
</html>
- 在我們的VC中引用#import <JavaScriptCore/JavaScriptCore.h>线罕， 并使用UIWebView去加載上面的html文件, 寫好JS和OC交互的界面止潮。
- (void)viewDidLoad
{
[super viewDidLoad];
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 100)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
UIButton *ocBut = [UIButton buttonWithType:UIButtonTypeCustom];
ocBut.backgroundColor = [UIColor greenColor];
ocBut.frame = CGRectMake(10, [UIScreen mainScreen].bounds.size.height - 80, [UIScreen mainScreen].bounds.size.width - 20, 30);
[ocBut setTitle:@"OC調(diào)用JS方法" forState:UIControlStateNormal];
[ocBut setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[ocBut addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:ocBut];
NSString* path = [[NSBundle mainBundle] pathForResource:@"Demo" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[self.webView loadRequest:request];
}
- 實(shí)現(xiàn)WebView加載完畢的代理
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"異常信息：%@", exceptionValue);
};
// 監(jiān)聽JS按鈕事件的回調(diào)
self.jsContext[@"callBackToOC"] =^{
NSArray *arg = [JSContext currentArguments];
for (id obj in arg)
{
NSLog(@"%@",obj);
}
};
}
加載完畢html頁面后，通過監(jiān)聽JS點(diǎn)擊事件后callBackToOC方法的回調(diào)拿到JS傳過來的值钞楼，達(dá)到JS調(diào)用OC的目的喇闸。點(diǎn)擊html頁面上的按鈕就能看到JS傳過來的消息：
2017-11-08 15:52:41.544201+0800 JavaScript[39008:2528651] "JS調(diào)用OC"
- 實(shí)現(xiàn)VC上面按鈕的點(diǎn)擊事件
- (void)butClick:(UIButton *)sender
{
[self.jsContext evaluateScript:@"ocClick('OC調(diào)用JS')"];
}
點(diǎn)擊vc上面的按鈕，就能看到OC調(diào)用JS的彈出框。
OC調(diào)用JS.png
代碼上傳GitHub
