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

时间:2023-02-15 23:29:34

==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];

            //更新选项内容到server端

            //推断当前选项跟已经提交到server端的时候一致,假设不一致。则提交到server端

            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];

            //更新选项内容到server端

            //推断当前选项跟已经提交到server端的时候一致,假设不一致,则提交到server端

            

            //假设选择新的分数,则同步到server端

            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交互的优点===

#协议:自己实现,在通讯的部分须要自己构建传递协议,多人实现造成构建的传递协议不同,比較easy混乱,採用统一的底层框架,能够降低这个问题;

#传递对象的字符转义:框架对这块又处理,不用自己再对一些字符进行转移;

#框架封装了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 // 域名+port号

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

Ios开发之 -- js和ios的交互的更多相关文章

  1. 《iOS开发全然上手——使用iOS 7和Xcode 5开发移动与平板应用》之Objective-C新手训练营

    编写Hello World应用程序通常被觉得,是学习不论什么编程语言的第一步.在这一章,你将创建iOS版的Hello World应用程序作为起步,高速了解Xcode这个开发iOS应用程序的主要工具. ...

  2. Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页

    Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...

  3. Delphi for iOS开发指南(7):在iOS应用程序中使用WebBrowser组件

    Delphi for iOS开发指南(7):在iOS应用程序中使用WebBrowser组件 在FireMonkey iOS应用程序中使用WebBrowser 在iOS平台上,FireMonkey使用T ...

  4. Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox组件来从列表中选择某一项

    http://blog.csdn.net/delphiteacher/article/details/8924110 Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox ...

  5. IOS开发数据存储篇—IOS中的几种数据存储方式

    IOS开发数据存储篇—IOS中的几种数据存储方式 发表于2016/4/5 21:02:09  421人阅读 分类: 数据存储 在项目开发当中,我们经常会对一些数据进行本地缓存处理.离线缓存的数据一般都 ...

  6. iOS开发——实用篇&提高iOS开发效率的方法和工具

    提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...

  7. IOS开发,知识点小结,ios开发中经常使用的宏定义总结

    IOS开发,从应用跳转到用浏览器打开网页: [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http:// ...

  8. app混合开发 fastlick.js 在ios上 input标签点击 不灵敏 处理

    ios11 上有这个问题 而老版本的ios没有 会出现这个的原因是使用fastclick.js点击后input没有获取焦点,所以只需要在fasyclick的源码的这个位置 可以直接在源码内搜索关键字找 ...

  9. iOS开发——程序员必备&iOS安装包的三种格式 deb、ipa 和 pxl的解释和说明

    iOS安装包的三种格式 deb.ipa 和 pxl的解释和说明 目前 iOS 平台上常见的安装包有三种,deb.ipa 和 pxl.转自链接:http://fanlb.blogbus.com/logs ...

随机推荐

  1. 需要获取设备方向变化(UIDeviceOrientation)的消息

    如果需要获得UIDeviceOrientation的转换消息的话,只需要: [[UIDevice currentDevice] beginGeneratingDeviceOrientationNoti ...

  2. C/C++ 网络库介绍

    C/C++ 网络库介绍 Aggregated List of Libraries(Source Link) Boost.Asio is really good. Asio is also availa ...

  3. iOS之UI--通讯录的实例关键知识技术点积累

    通讯录的实例关键知识技术点积累 效果展示: 作为博文笔记,既然是笔记,目的是为了能够以后做这个项目能够快速上手,如果这是我下一次阅览这个博文笔记,那么我应该先空手从零开始做,需求也就是这个项目的展示效 ...

  4. Makefile笔记

    一个简单的Makefile描述规则组成: TARGET...:PREREQUISITES... COMMANDS... ... target:规则的目标.通常是程序中间或者最后要生成的文件名,也可以是 ...

  5. ruby Mixin用法

    module My NA="China" attr:name attr:age def set_name(name) @name=name end def get_name ret ...

  6. PHP中的超级全局变量

    PHP内置了一些超级全局变量,我们可以在脚本的任何地方使用和可见,下面记录一下这些全局变量的作用: 1.$_SERVER $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户 ...

  7. Unity 定时开启/关闭外部应用

    自从加入工作的队伍里,博客都荒废了,今天周末,难得清静,写篇博客!刚才看到了Process类,随手写了个小demo.给大家分享下! 首先大家要对Process类有一些简单的了解,参考资料:https: ...

  8. 天梯赛决赛 L2-1.红色警报 并查集

    L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...

  9. ThinkPHP中:检查Session是否过期

    1.创建Session public function index(){ $sess_time=time(); session('name','andy'); session('time_stamp' ...

  10. Atitit sleep原理 node.js sleep解决方案 timer

    Atitit  sleep原理  node.js sleep解决方案  timer sleep()的实现分为三步: 1.注册一个信号signal(SIGALRM,handler).接收内核给出的一个信 ...