*/

- (void)webViewDidFinishLoad:(UIWebView *)webView {

// JSContext：给JavaScript提供运行的上下文环境

self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

self.jsContext[@"JSBridge"] = self;

self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {

context.exception = exceptionValue;

NSLog(@"IOS异常信息：%@", exceptionValue);

};

那IOS怎么调用前端能力的呢？对客户端来说很简单，一行代码的事情。

JSValue *getMsgFromIOS = self.jsContext[@"getMsgFromIOS"];

// args 传递给前端函数的参数列表，这里可以是多个，现在就写了一个

[getMsgFromIOS callWithArguments:@[args]];

至于剩下的客户端代码，就是画一些客户端交互UI，以及说一些数据转换的方法，没啥好讲的。

简单看下前端代码，也很简单，大家都看得懂。

这里简单说下，客户端往前端的window上注入了一个JSBridge对象，这个是我起的命名，你也可以随便命名，只要这个名字是客户端注入的名字就行了。

＜body＞

＜div＞

＜span＞接受来自客户端的信息：＜/span＞

＜span id="iosMsgWrapper"＞＜/span＞

＜/div＞

＜div＞＜input type="button" value="向IOS发数据" onclick="sendMsgToIOS()" /＞＜/div＞

＜script＞

/** 提供给客户端调用的方法，用于更改前端页面数据 */

function getMsgFromIOS(info) {

try {

const { eventName = '', params = {} } = info || {};

if (eventName === 'change_fe_text') {

const { desc = '' } = params || {};

const iosMsgWrapperNode = document.getElementById('iosMsgWrapper');

iosMsgWrapperNode.innerHTML = desc;

} catch {

alert(error, info);

};

/** 前端向客户端发送数据，客户端用于更新客户端页面 */

function sendMsgToIOS() {

const sendData = {

eventName: 'post_data_to_ios',

params: {

desc: '来自前端的数据',

};

const sendDataStr = JSON.stringify(sendData);

window.JSBridge.getMsgFromFS(sendDataStr);

＜/script＞

＜/body＞

＜/html＞

三.拦截式

这个在我的项目中，今晚就没实现，很简单，有时