iOS开发之JS和iOS的交互

WebViewJavascriptBridge的介绍

下载:https://github.com/marcuswestin/WebViewJavascriptBridge
关于WebViewJavascriptBridge的绍:http://blog.csdn.net/yanghua_kobe/article/details/8209751

WebViewJavascriptBridge的使用

iOS对于JS的调用：

[self.paperQuestionsShowWebview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"setQuestionContent('%@')",qTitle]];

JS对于iOS的调用：

在html js代码中改变当前window的href；

    window.location.href="selfEvaluate/"+value;

以上事件触发webview的shouldStartLoadWithRequest的回调事件；

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
   
    NSString *relativePath = request.mainDocumentURL.relativePath;
    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 *javascriptBridge;

初始化 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;
                //调用初始化函数，取消队列，使消息能够得到直接处理；
                bridge.init(function(message) {
                            alert(message);
                            });
   }

注册函数：

   function onBridgeReady(event) {
             ......
                 bridge.registerHandler('setQuestionContent',function(content){


                               var e_content = document.getElementByIdx_x('qcontent');
                              e_content.innerHTML= content;
                                       
                });
   }

实现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 //设置和读出cookie
document.charset //设置字符集 简体中文:gb2312
document：方法
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 // 完整URL
document.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

参考：http://blog.sina.com.cn/s/blog_a7c44c880101dmvj.html