OC与JS互相调用

简介:

最近项目中要用到html5来实现,涉及到OC调用JS,以及JS调用OC的方法,这里把遇到的问题以及实现方法介绍一下。



  1. //  

  2. //  ViewController.h  

  3. //  OC_And_JS  

  4. //  

  5. //  Created by 张杰 on 15/7/9.  

  6. //  Copyright  2015年 张杰. All rights reserved.  

  7. //  

  8.   

  9. #import <UIKit/UIKit.h>  

  10.   

  11. @interface ViewController : UIViewController <UIWebViewDelegate>  

  12.   

  13. @property (weak, nonatomic) IBOutlet UIButton *oc_call_js_no_params;  

  14. @property (weak, nonatomic) IBOutlet UIButton *oc_call_js_has_params;  

  15. @property (weak, nonatomic) IBOutlet UIWebView *mWebView;  

  16. @property (weak, nonatomic) IBOutlet UILabel *js_call_oc_show;  

  17.   

  18. - (IBAction)ocCallJsNoParams:(id)sender;  

  19. - (IBAction)ocCallJsHasParams:(id)sender;  

  20.   

  21.   

  22. @end  



[objc] view plain copy

  1. //  

  2. //  ViewController.m  

  3. //  OC_And_JS  

  4. //  

  5. //  Created by 张杰 on 15/7/9.  

  6. //  Copyright  2015年 张杰. All rights reserved.  

  7. //  

  8.   

  9. #import "ViewController.h"  

  10.   

  11. @interface ViewController ()  

  12.   

  13. @end  

  14.   

  15. @implementation ViewController  

  16.   

  17. - (void)viewDidLoad {  

  18.     [super viewDidLoad];  

  19.     _mWebView.delegate = self;  

  20.       

  21.     //打开URL  

  22.     NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];  

  23.     [self.mWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path]]];  

  24. }  

  25.   

  26. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{  

  27.     NSString *urlstr = request.URL.absoluteString;  

  28.     NSRange range = [urlstr rangeOfString:@"ios://jwzhangjie"];  

  29.     if (range.length!=0) {  

  30.         _js_call_oc_show.text = [NSString stringWithFormat:@"请访问地址:%@", urlstr];  

  31.     }  

  32.     return YES;  

  33. }  

  34.   

  35. -(void)webView:(nonnull UIWebView *)webView didFailLoadWithError:(nullable NSError *)error{  

  36.     NSLog(@"加载失败");  

  37. }  

  38.   

  39. -(void)webViewDidStartLoad:(nonnull UIWebView *)webView{  

  40.     NSLog(@"开始加载");  

  41. }  

  42.   

  43.   

  44. -(void)webViewDidFinishLoad:(nonnull UIWebView *)webView{  

  45.     NSLog(@"开始结束");  

  46. //    对于调用js的时候最好这个方法里面或者之后  

  47. }  

  48.   

  49.   

  50. - (void)didReceiveMemoryWarning {  

  51.     [super didReceiveMemoryWarning];  

  52.     // Dispose of any resources that can be recreated.  

  53. }  

  54.   

  55.   

  56.   

  57. - (IBAction)ocCallJsNoParams:(id)sender {  

  58.     NSString *js = [NSString stringWithFormat:@"ocCallJsNoParamsFunction();"];  

  59.     [self.mWebView stringByEvaluatingJavaScriptFromString:js];  

  60. }  

  61.   

  62. - (IBAction)ocCallJsHasParams:(id)sender {  

  63.     NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction('%@','%@');",@"jwzhangjie",@"http://jwzhangjie.cn"];  

  64.     [self.mWebView stringByEvaluatingJavaScriptFromString:js];  

  65. }  

  66. @end  


[javascript] view plain copy

  1. function ocCallJsNoParamsFunction()  

  2. {  

  3.     alert("OC调用JS中的无参方法");  

  4.     var e = document.getElementById("js_shouw_text");  

  5.     e.options.add(new Option("OC调用JS中的无参方法", 2));  

  6. }  

  7.   

  8. function ocCallJsHasParamsFunction(name, url)  

  9. {  

  10.     alert(name+"的博客地址为:"+url);  

  11.     var e = document.getElementById("js_shouw_text");  

  12.     e.options.add(new Option("OC调用JS中的有参方法", 2));  

  13. }  


[html] view plain copy

  1. <!DOCTYPE html>  

  2. <html lang="zh-CN">  

  3. <head>  

  4.     <meta charset="utf-8">  

  5.     <title>OC与JS互相调用</title>  

  6. </head>  

  7. <body>  

  8.     <div >  

  9.         <select id="js_shouw_text">  

  10.             <option>  

  11.                 展示OC调用JS无参数  

  12.             </option>  

  13.         </select>  

  14.     </div>  

  15.     <div>  

  16.         <BR/>  

  17.         <input type="button" value="JS调用OC方法" onclick="js_call_oc()"/>  

  18.     </div>  

  19.     <!--  这里要清楚,虽然test.js跟index.html不同及目录,实际安装到程序里面后,是在同级目录的,所以这里src不能加目录,同样css也是一样的  -->  

  20.     <script type="text/javascript" src="test.js" charset="UTF-8"></script>  

  21.     <script type="text/javascript">  

  22.         function js_call_oc()  

  23.         {  

  24.             var iFrame;  

  25.             iFrame = document.createElement("iframe");  

  26.             iFrame.setAttribute("src", "ios://jwzhangjie");  

  27.             iFrame.setAttribute("style", "display:none;");  

  28.             iFrame.setAttribute("height", "0px");  

  29.             iFrame.setAttribute("width", "0px");  

  30.             iFrame.setAttribute("frameborder", "0");  

  31.             document.body.appendChild(iFrame);  

  32.             // 发起请求后这个iFrame就没用了,所以把它从dom上移除掉  

  33.             iFrame.parentNode.removeChild(iFrame);  

  34.             iFrame = null;  

  35.         }  

  36.           

  37.     </script>  

  38. </body>  

  39.   

  40. </html>  


规避1:对于OC去调用JS内容最好在webViewDidFinishLoad方法里或者之后

规避2:在html里面引用js或者css的时候src不要带有路径,因为安装后文件都在同级目录下面

规避3:OC调用JS的规范

[objc] view plain copy

  1. NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction('%@','%@');",@"jwzhangjie",@"http://jwzhangjie.cn"];  

  2.    [self.mWebView stringByEvaluatingJavaScriptFromString:js];  

规避4:JS调用OC,这里通过html里面发送一个请求,然后在ios中使用shouldStartLoadWithRequest拦截请求,根据请求url的不同进行处理。


[javascript] view plain copy

  1. function js_call_oc()  

  2.        {  

  3.            var iFrame;  

  4.            iFrame = document.createElement("iframe");  

  5.            iFrame.setAttribute("src""ios://jwzhangjie");  

  6.            iFrame.setAttribute("style""display:none;");  

  7.            iFrame.setAttribute("height""0px");  

  8.            iFrame.setAttribute("width""0px");  

  9.            iFrame.setAttribute("frameborder""0");  

  10.            document.body.appendChild(iFrame);  

  11.            // 发起请求后这个iFrame就没用了,所以把它从dom上移除掉  

  12.            iFrame.parentNode.removeChild(iFrame);  

  13.            iFrame = null;  

  14.        }  


[objc] view plain copy

  1. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{  

  2.     NSString *urlstr = request.URL.absoluteString;  

  3.     NSRange range = [urlstr rangeOfString:@"ios://jwzhangjie"];  

  4.     if (range.length!=0) {  

  5.         _js_call_oc_show.text = [NSString stringWithFormat:@"请访问地址:%@", urlstr];  

  6.     }  

  7.     return YES;  

  8. }  











本文转自 卓行天下  51CTO博客,原文链接:http://blog.51cto.com/9951038/1860149,如需转载请自行联系原作者
目录
相关文章
|
JavaScript 前端开发 Android开发
JS(Javascript)调用Android原生方法三步走
JS(Javascript)调用Android原生方法三步走
578 0
|
JavaScript 前端开发 API
js调用网页摄像头进行直播/拍照
js调用网页摄像头进行直播/拍照
443 0
js调用网页摄像头进行直播/拍照
|
JavaScript Android开发 iOS开发
html通过js调用ios或android代码
html通过js调用ios或android代码
70 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
208 0
|
JavaScript 前端开发 Java
java调用js实现富文本过滤
java调用js实现富文本过滤
273 0
java调用js实现富文本过滤
|
JavaScript
js循环调用接口
js循环调用接口
326 0
|
JavaScript 前端开发
JavaScript 进阶第六章(this与函数的调用模式 )
JavaScript 进阶第六章(this与函数的调用模式 )
91 0
|
Web App开发 前端开发 JavaScript
Javascript 的工作原理:引擎、运行时和调用堆栈概述
随着 Javascript 越来越流行,使其应用的场景越来越多,不仅限于前端,可以是后端、混合应用程序、嵌入式设备等等,于是就有了大前端的叫法。本文开始带大家一起回顾总结 Javascript 的构建块以及它们是如何协同工作,理解其原理,将有助于编写更优的代码。
203 0
Javascript 的工作原理:引擎、运行时和调用堆栈概述
|
JavaScript
vue2:mixin(混入)(公共js调用;模块化)
vue2:mixin(混入)(公共js调用;模块化)
340 0
|
JavaScript 前端开发 Java
JS 调用栈机制与 ES6 尾调用优化介绍
调用栈的英文名叫做Call Stack,大家或多或少是有听过的,但是对于js调用栈的工作方式以及如何在工作中利用这一特性,大部分人可能没有进行过更深入的研究,这块内容可以说对我们前端来说就是所谓的基础知识,咋一看好像用处并没有很大,但掌握好这个知识点,就可以让我们在以后可以走的更远,走的更快! 目录 数据结构:栈 调用栈是什么?用来做什么? 调用栈的运行机制 调用栈优化内存 调用栈debug大法 数据结构:栈 栈是一种遵从后进先出(LIFO)原则的有序集合,新元素都靠近栈顶,旧元素都接近栈底。 生活中的栗子,帮助一下理解:
219 0
JS 调用栈机制与 ES6 尾调用优化介绍