iOS下JS与OC互相调用

背景情况：

app项目中有几个界面是需要经常变动的（不仅是内容还有UI布局等），比如活动宣传界面就是属于这一类。但是由于AppStore提交审核也是需要时间的，就算审核快，也不至于每次都为了这点事频繁审核吧。因此，这个界面就让Web组的来做HTML界面。

其实，如果只是安安静静的在app上展示下HTML，就很简单了。

JS与OC之间的交互，其实也就是两个方面，一种是点击HTML上的按钮，但是调用OC方法。另一种就是点击OC原生按钮，但是调用HTML中的方法。

一、点击HTML上的按钮，但是调用OC方法

在iOS7之后，Cocoa Touch添加了一个新的库javascriptCore，专门用来做JS交互，因此JS与原生OC交互也就简单了很多。

步骤一：首先要导入javascriCore库

#import <JavaScriptCore/JavaScriptCore.h>

 

在UIWebView加载完之后，在下面这个代理方法种完成步骤二三：

步骤二、在OC种获取JS的上下文

步骤三、定义好JS会调用的方法，注意方法名一定要与JS调用时的方法名统一

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 获取JS的上下文
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 定义好JS要调用的方法, ios_skipToSpaceList就是调用的ios_skipToSpaceList方法名
    context[@"ios_skipToSpaceList"] = ^() {
        NSLog(@"JS调用了ios_skipToSpaceList方法";
    };

    context[@"ios_shiptoToprizesList"] = ^() {
        NSLog(@"JS调用了ios_shiptoToprizesList方法");
    };
}

【说明】在开发中需要与HTML开发人员沟通好，确定好方法的名字，因为JS那边调用方法的时候就是你定义的方法名。

还有一点，因为HTML那边还需要与安卓那边适配，JS上肯定是需要区分对待的。所以跟HTML、服务器端协商下，怎么把app端的设备系统种类信息（iOS还是安卓）让HTML得知。

 

二、点击OC原生按钮，但是调用HTML中的方法

先说明下为什么有这样的需求，比如我这次，由于HTML同学写出的页面是可以放大缩小的，但是我app这边是不能让他缩放的，我就用JS代码控制下。（其实由HTML同学弄也可以，只是不想麻烦他了）

步骤一、首先写好JavaScript语句

NSString *injectionJSString = 
    @"var script = document.createElement('meta');"
    "script.name = 'viewport';"
    "script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"
    "document.getElementsByTagName('head')[0].appendChild(script);";

 

步骤二、注入到JS中

方式1：

[webView stringByEvaluatingJavaScriptFromString:injectionJSString];

方式2：

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

[context evaluateScript:injectionJSString];

 

三、一些小伎俩

1、获取网页的title、image、url

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 网页的标题
    NSString *webTitle = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    self.navigationItem.title = webTitle;

    // 网页的图标
    NSString *articleImageUrl = [_webView stringByEvaluatingJavaScriptFromString:@"document.images[0].src"];

    // 网页的url
    NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}