开发纪录（14）
最近一直有朋友问关于OC与JS交互的使用以及细节等等。由于公司开发使用的就是这种前端Html后段OC的开发模式，Ipad、 Iphone 、MAc
Window不同的设备上界面的统一管理，不得不说，方便啦后端开发人员。UI什么的界面什么的鬼，前端负责搞定。但是，在选择这种开发模式的时候，首先要明确一点：是交互型的APP 还是展示型的APP，如果是展示型的恭喜你，选择这种开发模式会非常轻松。如果是交互型的，慎用。。。。。
在IOS开发过程中OC与JS交互的方式有很多，网上一搜 一大堆。但是使用的比较多的第三方库有：WebviewJavaScriptBridge和OVGap，这两个库都是让webview与JS建立起一条桥梁。当然，苹果也给了我们原生的交互方式如：stringByEvaluatingJavaScriptFromString方法以及原生框架JavaScriptCore的使用。今天我们主要总结原生的方法的使用。
1、stringByEvaluatingJavaScriptFromString方法的使用
使用stringByEvaluatingJavaScriptFromString方法，需要等UIWebView中的页面加载完成之后去调用。我们在界面上拖放一个UIWebView控件。在Load中将google mobile加载到这个控件中，代码如下：
- (void)viewDidLoad
[super viewDidLoad];
webview.backgroundColor = [UIColor clearColor];
webview.scalesPageToFit =YES;
webview.delegate =self;
NSURL *url =[[NSURL alloc]
initWithString:@".hk/m?gl=CN&hl=zh_CN&source=ihp"];
NSURLRequest *request =
[[NSURLRequest alloc] initWithURL:url];
[webview loadRequest:request];
我们在webViewDidFinishLoad方法中就可以通过javascript操作界面元素了
1、获取当前页面的url。
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
2、获取页面title：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
3、修改界面元素的值。
NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='HiroGuo的专栏';"];
4、表单提交：
NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];
这样就实现了在google搜索关键字：“HiroGuo的专栏”的功能。
5、插入js代码
上面的功能我们可以封装到一个js函数中，将这个函数插入到页面上执行，代码如下：
[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function myFunction() { "
"var field = document.getElementsByName('q')[0];"
"field.value='HiroGuo';"
"document.forms[0].submit();"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];
上面的代码：
a、首先通过js创建一个script的标签，type为’text/javascript’。
b、然后在这个标签中插入一段字符串，这段字符串就是一个函数：myFunction，这个函数实现google自动搜索关键字的功能。
c、然后使用stringByEvaluatingJavaScriptFromString执行myFunction函数。
2、JavaScriptCore的使用
JavaScriptCore framework是iOS7.0后出来的新框架，使用需要注意项目支持系统版本。
关于JavaScriptCore
本教程中所涉及到的几种类型：
JSContext, JSContext是代表JS的执行环境，通过-evaluateScript:方法就可以执行一JS代码
JSValue, JSValue封装了JS与ObjC中的对应的类型，以及调用JS的API等
JSExport, JSExport是一个协议，遵守此协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，才能调用ObjC与JS交互方式
通过JSContext，我们有两种调用JS代码的方法：
1、直接调用JS代码
2、在ObjC中通过JSContext注入模型，然后调用模型的方法
直接调用JS代码
self.jsContext = [[JSContext alloc] init];
[self.jsContext evaluateScript:@"var num = 10"];
[self.jsContext evaluateScript:@"var squareFunc = function(value) { return value * 2 }"];
JSValue *square = [self.jsContext evaluateScript:@"squareFunc(num)"];
JSValue *squareFunc = self.jsContext[@"squareFunc"];
JSValue *value = [squareFunc callWithArguments:@[@"20"]];
NSLog(@"%@", square.toNumber);
NSLog(@"%@", value.toNumber);
这种方式是没有注入模型到JS中的。这种方式使用起来不太合适，通常在JS中有很多全局的函数，为了防止名字重名，使用模型的方式是最好不过了。通过我们协商好的模型名称，在JS中直接通过模型来调用我们在ObjC中所定义的模型所公开的API。
通过注入模型的方式交互
首先，我们需要先定义一个协议，而且这个协议必须要遵守JSExport协议。
@protocol JavaScriptObjectiveCDelegate &JSExport&
- (void)callSystemC
- (void)showAlert:(NSString *)title msg:(NSString *)
- (void)callWithDict:(NSDictionary *)
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)
需要定义一个模型：
@interface HYBJsObjCModel : NSObject &JavaScriptObjectiveCDelegate&
@property (nonatomic, weak) JSContext *jsC
@property (nonatomic, weak) UIWebView *webV
实例这个模型：
implementation HYBJsObjCModel
- (void)callWithDict:(NSDictionary *)params {
NSLog(@"Js调用了OC的方法，参数为：%@", params);
- (void)callSystemCamera {
NSLog(@"JS调用了OC的方法，调起系统相册");
JSValue *jsFunc = self.jsContext[@"jsFunc"];
[jsFunc callWithArguments:nil];
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params);
JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
[jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
- (void)showAlert:(NSString *)title msg:(NSString *)msg {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *a = [[UIAlertView alloc] initWithTitle:title message:msg delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
接下来，我们在controller中在webview加载完成的代理中，给JS注入模型。
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
HYBJsObjCModel *model
= [[HYBJsObjCModel alloc] init];
self.jsContext[@"OCModel"] =
model.jsContext = self.jsContext;
model.webView = self.webView;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionV
NSLog(@"异常信息：%@", exceptionValue);
通过webView的valueForKeyPath获取的，其路径为documentView.webView.mainFrame.javaScriptContext。
这样就可以获取到JS的context，然后为这个context注入我们的模型对象。
我们先写两个JS方法：
var jsFunc = function() {
alert('Objective-C call js to show alert');
var jsParamFunc = function(argument) {
document.getElementById('jsParamFuncSpan').innerHTML
= argument['name'];
这里我们定义了两个JS方法，一个是jsFunc，不带参数。另一个是jsParamFunc，带一个参数。
接下来，我们在html中的body中添加以下代码：
style="margin-top: 100px"&
&Test how to use objective-c call js&
type="button" value="Call ObjC system camera" onclick="OCModel.callSystemCamera()"&
type="button" value="Call ObjC system alert" onclick="OCModel.showAlertMsg('js title', 'js message')"&
type="button" value="Call ObjC func with JSON " onclick="OCModel.callWithDict({'name': 'testname', 'age': 10, 'height': 170})"&
type="button" value="Call ObjC func with JSON and ObjC call js func to pass args." onclick="OCModel.jsCallObjcAndObjcCallJsWithDict({'name': 'testname', 'age': 10, 'height': 170})"&
id="jsParamFuncSpan" style="color: font-size: 50"&&
现在就可以测试代码了。
当我们点击第一个按钮：Call ObjC system camera时，通过OCModel.callSystemCamera()，就可以在HTML中通过JS调用OC的方法。在OC代码中，我们的callSystemCamera方法体中，添加了以下两行代码，就是获取HTML中所定义的JS就去jsFunc，然后调用它。
JSValue *jsFunc = self.jsContext[@"jsFunc"];
[jsFunc callWithArguments:nil];
这样就可以在JS调用OC方法时，也让OC反馈给JS。
也可以传字典参数：
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params);
JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
[jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
获取我们在HTML中定义的jsParamFunc方法，然后调用它并传了一个字典作为参数。
源码下载地址
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4569次
排名：千里之外
原创：14篇
(3)(4)(4)(6)iOS开发-javaScript交互_iOS大全-爱微帮
&& &&& iOS开发-javaScript交互
（点击上方公众号，可快速关注）来源：伯乐在线专栏作者 -&林欣达链接：/86645/前言当前混合开发模式迎来了前所未有的发展，跨平台开发、热更新等优点决定了这种模式的重要地位。虽然前端界面在交互、动效等多方面距离原生应用还有差距，但毫无疑问混合开发只会被越来越多的公司接受。在iOS中，混合开发模式被分为两个时代，分别是iOS7之前的坑爹时代与之后的黄金时代，其分割代表为JavaScriptCore框架坑爹时代作为完美避开iOS7之前版本的幸运儿，我只能从某位前辈的口中得知那悲惨的岁月。作为那个年代唯一能与前端界面交互的手段就是UIWebView，先不说它自身的内存泄露缺陷，下面是一段前辈写过的代码：- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{&&&&NSString * address = request.URL.absoluteString;&&&&for (NSString * black in _blackList) {&&&&&&&&if ([address containsString: black]) {&&&&&&&&&&&&return NO;&&&&&&&&}&&&&}&&&&for (NSString * event in _eventList) {&&&&&&&&if ([address containsString: event]) {&&&&&&&&&&&&SEL callback = NSSelectorFromString(_callbacks[event]);&&&&&&&&&&&&[self performSelector: callback];&&&&&&&&&&&&return [event containsString: @&shouldOpen=1&];&&&&&&&&}&&&&}&&&&return YES;}在那个年代，前辈的小伙伴们把前端事件的触发条件设置为链接跳转，然后通过链接中的关键字符来判断处理操作。为此，需要定义好些个数据集合来存储这些关键字符的处理操作。如果遇到应用和前端交换交互数据的时候，那一长串的参数字符全部拼接在请求地址里，想想也是醉了。另外的交互方法就是通过stringByEvaluatingJavaScriptFromString方法来执行js代码。JavaScriptCoreJavaScriptCore是一套用来对JS代码进行解析和提供执行环境的开源框架，极大的简化了我们的交互过程。下面从项目和JS代码相互调用的两个不同操作介绍其中相对应的方法项目调用JS代码JSContext一个JSContext对象是JavaScript运行的全局环境对象，它提供了代码运行和注册方法接口的服务。下面的代码就创建了一个JSContext对象，并且定义了一部分的JS代码加入到执行环境中let context = JSContext()context.evaluateScript(& var age = 22 &)context.evaluateScript(& var name = 'SindriLin' &)context.evaluateScript(& var birth =
&)context.evaluateScript(& var createPerson = &&&&function(age, name, birth) &&&&{ &&&&&&&&return {'age': age, 'name': name, 'birth': birth}&&&&} &)context.evaluateScript(& var codeDescription = 'The code create three value and a function to create a dictionary stored person information' &)此外，在JS代码执行过程中，可能会出现语法错误等多种错误，通过下面的代码可以对这些错误进行处理context?.exceptionHandler = { context, exception in &&&&&&print(&Java Script Run Error: \(exception)&)}JSValueJSValue是所有JSContext操作后返回的值，包装了几乎所有的数据类型，包括错误和IMP指针等。在JSValue类结构中存在多个toXXXX命名的方法转换成iOS数据类型以及call方法来调用方法。下面的代码从JSContext环境中获取已存在的部分变量，并且执行创建一个存储person信息的字典let age = context?.objectForKeyedSubscript(&age&)let name = context?.objectForKeyedSubscript(&name&)let birth = context?.objectForKeyedSubscript(&birth&)let createFunction = context?.objectForKeyedSubscript(&createPerson&)let codeDescription = context?.objectForKeyedSubscript(&codeDescription&)let person = createFunction.call(withArguments: [age.toInt32(), name.toString(), birth.toString()])&let personInfo = &name: \(person[&name&]) age: \(person[&age&] and birth: \(person[&birth&])&print(&The javaScript code description: \(codeDescription.toString())&)print(&The created person \(personInfo) &)通过上面的例子，我们可以看到，只要了解到JS代码中我们需要调用的方法信息，通过JSContext + JSValue的方式我们就能轻松的在项目中调用前端界面的方法，而不再需要拼接长串参数字符通过链接地址传递给前端界面JS调用项目代码JavaScript访问我们代码中的对象以及方法有两种方式：Blocks和JSExport。Blocks自定义的block代码可以通过JSContext转换成JS代码中的函数指针调用，这里存在一个坑就是Swift中的闭包无法完成这样的类型转换，因此这种方式的操作流程在Swift中是这样的：Closure -& block -& function pointer。在闭包转成block的这一过程中，需要使用一个重要的关键符@conventionlet stringConvert: @convention(block) (String)-&String = {&&&&let pinyin = NSMutableString(string: $0) as CFMutableString&&&&CFStringTransform(pinyin, nil, kCFStringTransformToLatin, false)&&&&CFStringTransform(pinyin, nil, kCFStringTransformStripCombiningMarks, false)&&&&return pinyin as String}&&&&&&&let convertObjc = unsafeBitCast(stringConvert, to: AnyObject.self)context?.setObject(convertObjc, forKeyedSubscript: &convertFunc&)let convertFunc = context?.objectForKeyedSubscript(&convertFunc&)print(&林欣达的拼音是\(convertFunc.call(withArguments: [&林欣达&]).toString())&)这时候，只要前端在JS的按钮点击代码中调用convertFunc()这句代码就会执行这个closure中的代码。使用这种方式要注意由于闭包的捕获特性，有可能会导致你的JSContext对象被引用而无法被释放，使用JSContext.current()获取当前上下文来解决引用问题JSExport在JS中调用iOS方法的时候，通过调用JSExport的派生协议方法来实现。所有派生协议的方法会自动提供给JavaScript代码使用，这个在下面的demo中可以看到实战在本文demo中我写了一段JS代码，下面放出这段代码以及运行效果。其中要注意的是按钮的onclik表示按钮点击的响应事件：&!DOCTYPE html&&html&&&&&&head&&&&&&&&&&meta charset=&UTF-8&&&&&&&/head&&&&&&body&&&&&&&&&&div style=&margin-top: 20px&&&&&&&&&&&&&&&h2 align=&center& style=&color:#ff0000&&JS与iOS交互&/h2&&&&&&&&&&&&&&input type=&button& value=&点击后切换控制器的背景颜色& onclick=&sindrilin.call()&&&&&&&&&&&/div&&&&&&&&&&div style=&color:#7BBDE5&&&&&&&&&&&&&&&br /&&&&&&&&&&&&&&br /&&&&&&&&&&&&&账户：&&&&&&&&&&&&&input id=&account& type=&text&&&&&&&&&&&&&&&br /&&&&&&&&&&&&&密码：&&&&&&&&&&&&&input id=&password& type=&password&&&&&&&&&&&/div&&&&&&&&&&div&&&&&&&&&&&&&&input type=&button& value=&登录& onclick=&login()&&&&&&&&&&&/div&&&&&&&&&&&script&&&&&&&&&&&&&&var login = function()&&&&&&&&&&&&{&&&&&&&&&&&&&&&&account = document.getElementById(&account&)&&&&&&&&&&&&&&&&password = document.getElementById(&password&)&&&&&&&&&&&&&&&&var accountInfo = JSON.stringify({&account&: account.value, &password&: password.value});&&&&&&&&&&&&&&&&sindrilin.login(accountInfo);&&&&&&&&&&&&}&&&&&&&&&&&&&var alertFromIOS = function(message)&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&alert(message)&&&&&&&&&&&&}&&&&&&&&&&/script&&&&&&/body&&/html&首先我们需要加载这个HTML文件，然后获取代码运行的全局环境对象。基本上在所有的HTML格式文件中，获取环境对象的keyPath都是一样的：let jsPath = Bundle.main().pathForResource(&interaction&, ofType: &html&)webView.loadRequest(URLRequest(url: URL(fileURLWithPath: jsPath!)))interactionContext = webView.value(forKeyPath: &documentView.webView.mainFrame.javaScriptContext&) as? JSContextinteractionContext?.exceptionHandler = {&&&&print(&Interaction Error: \($1?.toString())&)}对照HTML代码，最上面的按钮点击之后会调用一个sindrilin.call()的方法，这个方法最终要由我们的控制器来进行处理。我们可以把这个字符串分成类似Target-Action机制的两部分，前者sindrilin表示响应者，后面call()表示响应事件。其中Target的设置方式如下interactionContext?.setObject(self, forKeyedSubscript: &sindrilin&)响应者已经有了，那么响应事件也要我们实现代码，这里就需要用到JSExport协议了。所有这种类似Target-Action的事件触发都会通过这个协议获取方法实现，因此我们需要自定义响应协议以及响应事件。对于有参数的方法我们需要用@objc(name)的方式给方法起OC式的方法名，才能保证能被正确调用响应：@objc protocol LXDInteractionExport: JSExport {&&&&func call()&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&///响应sindrilin.call()&&&&@objc(login:) func login(accountInfo: String)&&///响应sindrilin.login(accountInfo)}&extension ViewController: LXDInteractionExport {&&&&func call() {&&&&&&&&print(&call from html button clicked&)&&&&&&&&view.backgroundColor = UIColor(red: CGFloat(arc4random() % 256) / 255, green: CGFloat(arc4random() % 256) / 255, blue: CGFloat(arc4random() % 256) / 255, alpha: 1)&&&&}&&&&&func login(accountInfo: String) {&&&&&&&&do {&&&&&&&&&&&&if let JSON: [String: String] = try JSONSerialization.jsonObject(with: accountInfo.data(using: String.Encoding.utf8)!, options: JSONSerialization.ReadingOptions()) as? [String: String] {&&&&&&&&&&&&&&&&print(&JSON: \(JSON)&)&&&&&&&&&&&&&&&&let alert = interactionContext?.objectForKeyedSubscript(&alertFromIOS&)&&&&&&&&&&&&&&&&let message = &The alert from javascript call\naccount: \(JSON[&account&]) and password: \(JSON[&password&])&&&&&&&&&&&&&&&&&_ = alert?.call(withArguments: [message])&&&&&&&&&&&&}&&&&&&&&} catch {&&&&&&&&&&&&print(&Error: \(error)&)&&&&&&&&}&&&&&&&&&&}}用户在前端界面输入账户和密码信息之后点击登录就会调用login(accountInfo: String)方法，将用户名和密码拼凑成JSON字符串传递过来。在响应方法中我解析获取对应字段的用户信息，并且组转成新的字符串调用JS的弹窗函数弹出响应。demo下载:/JustKeepRunning/LXDJavaScriptCoreDemo【今日微信公号推荐↓】更多推荐请看《》其中推荐了包括技术、设计、极客&和&IT相亲相关的热门公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《》，发现精彩！
点击展开全文
伯乐在线旗下账号，分享 iOS 和 Mac 相关技术文章、工具资源、精选课程、热点资讯
您的【关注和订阅】是作者不断前行的动力
本站文章来自网友的提交收录，如需删除可进入
删除，或发送邮件到 bang＠ 联系我们，
(C)2014&&版权所有&&&|&&&
京ICP备号-2&&&&京公网安备34Ios开发之 -- js和ios的交互
Ios开发之 -- js和ios的交互
==WebViewJavascriptBridge的介绍==#下载:/marcuswestin/WebViewJavascriptBridge#关于WebViewJavascriptBridge的介绍:http://blog.csdn.net/yanghua_kobe/article/details/8209751==WebViewJavascriptBridge（在与现有的业务代码结合使用中）的小问题==*demo部分( &ExampleApp.html界面中第50行)：&&&&&&&&bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {&&&&&&&由于底层回传是两个参数responseCallback(message.error, message.responseData) ,因此reponse对应的是message.error,此demo中得到的是undefinded；&&&*源码实现部分（webview加载回调事件webViewDidFinishLoad）：&&&- (void)webViewDidFinishLoad:(UIWebView *)webView {&&&&if (webView != _webView) { }&&&&if (![[_webView stringByEvaluatingJavaScriptFromString:@"typeof WebViewJavascriptBridge == 'object'"] isEqualToString:@"true"]) {&&&&&&&&NSString *filePath = [[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridge.js" ofType:@"txt"];&&&&&&&&NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];&&&&&&&&[_webView stringByEvaluatingJavaScriptFromString:js];&&&&}&&&&&&&&if (self.startupMessageQueue) {&&&&&&&&for (id queuedMessage in self.startupMessageQueue) {&&&&&&&&&&&&[self _dispatchMessage:queuedMessage];&&&&&&&&}&&&&&&&&self.startupMessageQueue =&&&&}&&&&&&&&if (self.webViewDelegate && [self.webViewDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) {&&&&&&&&[self.webViewDelegate webViewDidFinishLoad:webView];&&&&}}WebViewJavascriptBridge的使用流程中要将webview的delegate首先设置为自身，这是必须条件，如果现有的业务代码中需要使用webview的回调事件，则需要在初始化WebViewJavascriptBridge时制定业务代码自身为后续的delegate；在设定后续delegate之后，会出现问题；以上代码会造成webViewDidFinishLoad被调用两次：业务代码中设置webview的回调事件，而以上代码中引入.js.txt资源，资源里有对dom的直接修改，也会触发webViewDidFinishLoad回调函数；由此造成业务代码中的webViewDidFinishLoad会被执行两次，形成错误或者不必要的多次调用；处理：在js.txt资源引入之前不执行后续的代码处理，即阻止第一次的viewdidload的后续调用，修改后如下：- (void)webViewDidFinishLoad:(UIWebView *)webView {&&&&&&&&if (webView != _webView) { }&&&&if (![[_webView stringByEvaluatingJavaScriptFromString:@"typeof WebViewJavascriptBridge == 'object'"] isEqualToString:@"true"]) {&&&&&&&&NSString *filePath = [[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridge.js" ofType:@"txt"];&&&&&&&&NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];&&&&&&&&[_webView stringByEvaluatingJavaScriptFromString:js];&&&&}&&&&// 对于源码的变动，在js.txt加载之前，对于业务后续调用，不处理；&&&&else{&&&&&&&&if (self.startupMessageQueue) {&&&&&&&&&&&&for (id queuedMessage in self.startupMessageQueue) {&&&&&&&&&&&&&&&&[self _dispatchMessage:queuedMessage];&&&&&&&&&&&&}&&&&&&&&&&&&self.startupMessageQueue =&&&&&&&&}&&&&&&&&if (self.webViewDelegate && [self.webViewDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) {&&&&&&&&&&&&[self.webViewDelegate webViewDidFinishLoad:webView];&&&&&&&&}&&&&}}&*源码部分（初始化函数）：nil不能作为NSdictionary的value；错误：- (void)callHandler:(NSString *)handlerName {&&&&[self callHandler:handlerName data:nil responseCallback:nil];}正确：- (void)callHandler:(NSString *)handlerName {&&&&[self callHandler:handlerName data:[NSNull null] responseCallback:nil];}==WebViewJavascriptBridge的使用=====js和ios交互的直接代码实现===*jos对于js的调用：[self.paperQuestionsShowWebview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"setQuestionContent('%@')",qTitle]];*js对于ios的调用：在html js代码中改变当前window的href；&&&&window.location.href="selfEvaluate/"+以上事件触发webview的shouldStartLoadWithRequest的回调事件；- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{&&&&&&&NSString *relativePath = request.mainDocumentURL.relativeP&&&&if ([relativePath hasSuffix:@".html"]) {&&&&&&&&return YES;&&&&}&&&&else{&&&&&&&&NSRange doingRange = [relativePath rangeOfString:@"/doing/"];&&&&&&&&if (doingRange.length&0) {&&&&&&&&&&&&//获取用户选择的选项&&&&&&&&&&&&NSString *userNewChoice = [relativePath substringFromIndex:doingRange.location+doingRange.length];&&&&&&&&&&&&//更新选项内容到服务器端&&&&&&&&&&&&//判断当前选项跟已经提交到服务器端的时候一致，如果不一致，则提交到服务器端&&&&&&&&&&&&if (![userNewChoice isEqualToString:self.currentQuestionAnswer]) {&&&&&&&&&&&&&&&&[self.delegate updateQuestionUserChoiceWithPid:self.paperId questionSequence:self.currentQuestionSequence choice:userNewChoice&remainTime:self.reimainTime sender:self];&&&&&&&&&&&&&&&&//NSLog(@"update");&&&&&&&&&&&&}&&&&&&&&}&&&&&&&&else{&&&&&&&&&&&&.....&&&&&&&&}&&&&&&&&return NO;&&&&}}===js和ios交互的（WebViewJavascriptBridge）代码实现===*ios端的实现：&&&引入头文件：&&#import "WebViewJavascriptBridge.h"；&&&&指定WebViewJavascriptBridge 属性：&&&@property (strong, nonatomic) WebViewJavascriptBridge *javascriptB&&&&初始化 WebViewJavascriptBridge；&&&&_javascriptBridge = [WebViewJavascriptBridge bridgeForWebView:_paperQuestionsShowWebview webViewDelegate:self handler:nil];&&&注册函数；&&&&[_javascriptBridge registerHandler:@"setSubjectiveQuestionScore" handler:^(id data, WVJBResponse *response){&&&&&&&&&&&&//获取用户选择的选项&&&&&&&&&&&&&NSInteger userScoreChoice = [(NSString *)data integerValue];&&&&&&&&&&&&//更新选项内容到服务器端&&&&&&&&&&&&//判断当前选项跟已经提交到服务器端的时候一致，如果不一致，则提交到服务器端&&&&&&&&&&&&&&&&&&&&&&&&//如果选择新的分数，则同步到服务器端&&&&&&&&&&&&if (userScoreChoice!=self.currentQuestionScore) {&&&&&&&&&&&&&&&&[self.delegate updateQuestionUserChooseScoreWithPid:self.paperId questionSequence:self.currentQuestionSequence score:userScoreChoice sender:self];&&&&&&&&&&&&}&&&&&&&&}];&&&&调用js代码；&&&[_javascriptBridge callHandler:@"setRightAnswer" data:qAnswer ];&&*js的实现：&&&必要的事件注册和初始化：&&&document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false);&&&function onBridgeReady(event) {&&&&&&&&&&&&&&&&var bridge = event.&&&&&&&&&&&&&&&&//调用初始化函数，取消队列，使消息能够得到直接处理；&&&&&&&&&&&&&&&&bridge.init(function(message) {&&&&&&&&&&&&&&&&&&&&&&&&&&&&alert(message);&&&&&&&&&&&&&&&&&&&&&&&&&&&&});&&&}&&&&注册函数：&&&function onBridgeReady(event) {&&&&&&&&&&&&&......&&&&&&&&&&&&&&&&&bridge.registerHandler('setQuestionContent',function(content){&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var e_content = document.getElementByIdx_x('qcontent');&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&e_content.innerHTML=&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&});&&&}&&&&实现js对ios的调用:&&&&&&newChoiceElement.onclick = function(){&&&&&&&&&&&&&&&bridge.callHandler('choose',this.value);&&&&&&&}&===js和ios交互的（WebViewJavascriptBridge）代码实现中需要注意的问题===#ios端必须保障框架中ios的实现作为webview的delegate，而业务代码作为后续的delegate处理在初始化中加入；不然消息得不到传递（会加入一个队列，但是不会触发消息传递）；#js端必须实现init函数，不然消息得不到传递（会加入一个队列，但是不会触发消息传递）；#关于参数（ios端）：单个的对象可以直接传递（int等基础类型需要转换成对应的对象）；多值传递需要组成NSDictionary进行传递；#关于参数（js端）：单个对象直接传递；多值组成json格式字符串{'aa':'ss','sdd':'rrr'};#js语法以及编辑器对于错误的指示不明显，造成一些字符或标点错误，以及语法不完成的错误很难被发现，是消耗时间比较长的地方，需要通过寻找更加完善的js编辑器解决；===代码引入WebViewJavascriptBridge实现ios和js交互的好处===#协议：自己实现，在通讯的部分需要自己构建传递协议，多人实现造成构建的传递协议不同，比较容易混乱，采用统一的底层框架，可以减少这个问题；#传递对象的字符转义：框架对这块又处理，不用自己再对一些字符进行转移；#框架封装了js和ios的多次交互，在实现比较复杂的交互时比较有用，这块如果开发人员自己实现，则代码质量难控制，而且有一定的工作量；document：属性document.title //设置文档标题等价于HTML的document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)document.linkColor //未点击过的链接颜色document.alinkColor //激活链接(焦点在此链接上)的颜色document.vlinkColor //已点击过的链接颜色document.URL //设置URL属性从而在同一窗口打开另一网页document.fileCreatedDate //文件建立日期，只读属性document.fileModifiedDate //文件修改日期，只读属性document.fileSize //文件大小，只读属性document.cookie //设置和读出cookiedocument.charset //设置字符集 简体中文:gb2312document：方法document.write() //动态向页面写入内容document_createElement_x_x_x(Tag) //创建一个html标签对象document.getElementByIdx_xx_x_x(ID) //获得指定ID值的对象document.getElementsByName(Name) //获得指定Name值的对象document.body.a(oTag)body：子对象document.body //指定文档主体的开始和结束等价于document.body.bgColor //设置或获取对象后面的背景颜色document.body.link //未点击过的链接颜色document.body.alink //激活链接(焦点在此链接上)的颜色document.body.vlink //已点击过的链接颜色document.body.text //文本色document.body.innerText //设置…之间的文本document.body.innerHTML //设置…之间的HTML代码document.body.topMargin //页面上边距document.body.leftMargin //页面左边距document.body.rightMargin //页面右边距document.body.bottomMargin //页面下边距document.body.background //背景图片document.body.a(oTag) //动态生成一个HTML对象location：子对象document.location.hash // #号后的部分document.location.host // 域名+端口号document.location.hostname // 域名document.location.href // 完整URLdocument.location.pathname // 目录部分document.location.port // 端口号document.location.protocol // 网络协议(http:)document.location.search // ?号后的部分常用对象事件:documeny.location.reload() //刷新网页document.location.reload(URL) //打开新的网页document.location.assign(URL) //打开新的网页document.location.replace(URL) //打开新的网页selection-选区子对象document.selection
发表评论：
TA的最新馆藏[转]&[转]&[转]&[转]&}