Ios开发之 -- js和ios的交互

简介: <p style="margin-top:0px; margin-bottom:1.2em; padding-top:0px; padding-bottom:0px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:24px; color:rgb(102,102,102); font

==WebViewJavascriptBridge的介绍==
#下载:https://github.com/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) { return; }


    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 = nil;
    }
    
    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) { return; }
    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];
    }
    //2012-12-3 对于源码的变动,在js.txt加载之前,对于业务后续调用,不处理;
    else{
        if (self.startupMessageQueue) {
            for (id queuedMessage in self.startupMessageQueue) {
                [self _dispatchMessage:queuedMessage];
            }
            self.startupMessageQueue = nil;
        }
        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/"+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

目录
相关文章
|
17天前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
32 0
|
6天前
|
机器学习/深度学习 数据采集 前端开发
网络爬虫开发:JavaScript与Python特性的小差异
我们以前写JavaScript的代码时,在遇到了发送请求时,都是需要去await的。 但是为什么Python代码不需要这样做呢? 这就是因为JavaScript是异步的,Python是同步的。 JavaScript就需要使用关键词await将异步代码块变为同步代码。
|
20天前
|
运维 JavaScript 前端开发
前端 JS 经典:vue 开发中的 base 和 publicPath
前端 JS 经典:vue 开发中的 base 和 publicPath
23 1
|
24天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
23 1
|
28天前
|
缓存 JavaScript 前端开发
js开发代码片段与小技巧
js开发代码片段与小技巧
16 2
|
1月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
|
18天前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
17 0
|
18天前
|
JavaScript 数据安全/隐私保护 索引
node.js 命令行交互工具(最新版) inquirer.js 实用教程
node.js 命令行交互工具(最新版) inquirer.js 实用教程
16 0