1.OC中调用JS代码

  • 公司的移动端需要加载一个现有的网页，并且要在原网页要做一些小的调整，如将网页的标题改一下加载到手机的app上，此时就可以在app的oc代码中加入JS代码来实现。如下例子，我要加载一个鲜花网（http://www.xianhua.cn/m/）并把它原有的标题"手机鲜花网"改为"鲜花网".
  • 原网页如下

  • 代码如下,先在viewDidLoad中加载网页，并加上菊花，隐藏网页（因为直接加载处理的标题不是我们想要的），再到 webViewDidFinishLoad: 这个方法中将js代码写入到一个字符串，作为参数传入这个方法 stringByEvaluatingJavaScriptFromString： ，此时网页就被改了，最后停止菊花，显示网页。
 - (void)viewDidLoad {

     [super viewDidLoad];

     //加载HTML

     NSURL *url = [NSURL URLWithString:@"http://www.xianhua.cn/m/"];

     NSURLRequest *request = [NSURLRequest requestWithURL:url];

     [self.webView loadRequest:request];

     // 先将网页隐藏

     self.webView.scrollView.hidden = YES;

     self.webView.backgroundColor = [UIColor grayColor];

 //    // 加菊花

     UIActivityIndicatorView *displayView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

     self.displayView = displayView;

     // 开始转圈

     [displayView startAnimating];

     displayView.center = self.view.center;

     [self.webView addSubview:displayView];

 }

 #pragma - 代理方法

 -(void)webViewDidFinishLoad:(UIWebView *)webView{

    NSString *str = @"document.getElementById('header').getElementsByTagName('h1')[0].innerText = '鲜花网';""document.getElementsByClassName('detail_btns2')[0].remove();""document.getElementById('xiazaiapp').getElementsByTagName('a')[0].innerText = '下载大神6期鲜花网(www.6q.com)App';";

     // 加载js代码

   [webView stringByEvaluatingJavaScriptFromString:str];

     // 当执行完以上js代码后，就停止动画，并显示网页

     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

         [self.displayView stopAnimating];

         self.webView.scrollView.hidden = NO;

     });

 }
  • 结果如下，可以看到标题已经改成鲜花网了：

　　2. JS中调用OC方法

  • 在网页中点击一个按钮打开手机相册，这样的需求就需要在js代码中调用oc的方法
  • 可以先在js中布局一个按钮，并写一个函数，当点击按钮时就调用这个函数，函数中一定要传递一个参数，这个参数就包括：协议头（用来识别是谁发送的请求）和方法名，如下代码，协议头是"js：///",要调用的方法名是"openCamera"：
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>打开相册</title>

     <style>

         body{

             padding: 30px;

         }

     </style>

 </head>

 <body>

    <button onclick="openCamera();">打开相册</button>

    <script type="text/javascript">

        // 内置对象 window

        function openCamera(){

            window.location.href = 'js:///openCamera';

        }

    </script>

 </body>

 </html>
  • 此时JS代码已经完成，再到OC中解析，在这个方法中webView:shouldStartLoadWithRequest:navigationType:获取JS传递过来的参数，并解析它，将方法名截取出来，调用该方法
 - (void)viewDidLoad {

     [super viewDidLoad];

     NSURL *url = [[NSBundle mainBundle] URLForResource:@"openCamera" withExtension:@"html"];

     NSURLRequest *request = [NSURLRequest requestWithURL:url];

     [self.webView loadRequest:request];

 }

 // 打开相册

 - (void)openCamera{

     UIImagePickerController *vc = [[UIImagePickerController alloc] init];

     vc.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

     [self presentViewController:vc animated:YES completion:nil];

 }

 #pragma mark -<UIWebViewDelegate>

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

     NSString *webUrl = request.URL.absoluteString;

     NSRange range = [webUrl rangeOfString:@"js:///"];

     // 获取协议头的第一个字母位置

     NSUInteger location = range.location;

     // 如果协议正确

     if (location != NSNotFound) {

         // 从协议头最后一个字母开始，全部转为字符串（拿到方法名）

         NSString *str = [webUrl substringFromIndex:location + range.length];

         // 将字符串转为selector，并给self调用

         SEL open = NSSelectorFromString(str);

         [self performSelector:open];

     }

     return YES;

 }

【iOS开发之OC和JS互调】的更多相关文章

  1. ios开发之OC基础-类和对象

    本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

  2. ios开发之OC基础-oc小程序

    本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

  3. ios开发之OC基础-ios开发学习路线图

    本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

  4. 李洪强iOS开发之OC语言前期准备

    OC语言前期准备 一.OC简介 Oc语言在c语言的基础上,增加了一层最小的面向对象语法,完全兼容C语言,在OC代码中,可以混用c,甚至是c++代码. 可以使用OC开发mac osx平台和ios平台的应 ...

  5. 李洪强iOS开发之OC语言基础知识

    OC语言基础知识 一.面向对象 OC语言是面向对象的,c语言是面向过程的,面向对象和面向过程只是解决问题的两种思考方式,面向过程关注的是解决问题涉及的步骤,面向对象关注的是设计能够实现解决问题所需功能 ...

  6. 李洪强iOS开发之OC点语法和变量作用域

    OC点语法和变量作用域 一.点语法 (一)认识点语法 声明一个Person类: 1 #import <Foundation/Foundation.h> 2 3 @interface Per ...

  7. 李洪强iOS开发之OC面向对象—多态

    OC面向对象—多态 一.基本概念 多态在代码中的体现,即为多种形态,必须要有继承,没有继承就没有多态. 在使用多态是,会进行动态检测,以调用真实的对象方法. 多态在代码中的体现即父类指针指向子类对象. ...

  8. 李洪强iOS开发之OC语言类的深入和分类

    OC语言类的深入和分类 一.分类 (一)分类的基本知识  概念:Category  分类是OC特有的语言,依赖于类. 分类的作用:在不改变原来的类内容的基础上,为类增加一些方法. 添加一个分类: 文件 ...

  9. 李洪强iOS开发之OC语言构造方法

    OC语言构造方法 一.构造方法 (一)构造方法的调用 完整的创建一个可用的对象:Person *p=[Person new]; New方法的内部会分别调用两个方法来完成2件事情,1)使用alloc方法 ...

随机推荐

  1. Oracle 优化——位图、函数等索引介绍

    一.位图索引 我将使用一个例子,来描述位图索引的存储,并分析它的优点. Table :Loans 放贷信息 ID userId 行业投向 币种 证件类型 还本付息方式 状态 1 1 农业 人民币 身份 ...

  2. 武汉科技大学ACM ：1007: 华科版C语言程序设计教程（第二版）习题7.10

    Problem Description 输入n(n<100)个字符串,每个字符串长度不超过1000,将他们按字典顺序输出. Input 多组测试样例. 每组第一行有一个整数n表示有n个字符串. ...

  3. Delphi 串口打印机打印

    一.硬件准备 打印机: 打印机必须具有串口,没有标配串口的打印机,必须购买串口卡,串口卡的型号请参考随机<操作手册>. 计算机: 计算机必须具有串口,计算机通常具有两个串口:COM1和CO ...

  4. Win+PHP+IECapt完整实现网页批量截图并创建缩略图

    最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中 ...

  5. linux笔记2.24

    安装vsftpd mount /dev/cdrom /mnt cp vsftpd-1.1.3-8.i386.rpm /home/soccer/ chmod 777 vsftpd-1.1.3-8.i38 ...

  6. Html jquery实现根据 IOS和Android访问跳转

    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> ...

  7. 我自己的style

    /** DATE:Time AUTHOR:Zoe TEAM:公司名称 INTRO:cssName **/ @charset "utf-8"; /*通用公共样式 开始*/ /* 清除 ...

  8. 如何用PowerPoint制作闪烁的星星

    在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...

  9. d017: 打印某年某月有几天

    内容: 打印某年某月有几天 输入说明: 一行两个整数,前面是年份 后面是月份 输出说明: 一个整数 输入样例:   2009 6 输出样例 : 30 #include <stdio.h> ...

  10. 用异提交时，后台通过校验规则文件，校验不通过时，跳转到INPUT视图时，前台显示错误信息的解决办法

    1.第一种: 最近项目使用了struts2的校验(其实我觉得后台校验,特别是struts的校验,完全可以放在其他地方处理,比如交给js或者业务逻辑),而且系统刚好还使用了extjs,此时问题出现了:假 ...