iOS通过UIWebView实现与JS的交互

最近的一个项目中需要实现OC与JS的交互,在iOS中实现方法有三种,本文主要介绍下UIWebView如何与JS交互。

一、UIWebView的基本用法

1、加载网页

//加载本地文件
NSString *path = [[NSBundle mainBundle] bundlePath]; 
NSURL *baseURL = [NSURL fileURLWithPath:path]; 
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; 
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:htmlCont baseURL:baseURL];
//直接加载网页
NSURL *url = [[NSURL alloc] initWithString:@"http://www.baidu.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];

注意:将网页作为本地文件加载的好处是能更好的与本地文件进行交互,如果你想把手机图片传给js,只需要把图片保存的路径传入即可。直接加载网页的情况下需要将图片进行base64编码。具体参考这篇文章http://www.cnblogs.com/HwangKop/p/5010275.html
2、代理方法

//每当webView加载一个请求都会来到这个方法,返回YES允许加载,然后StartLoad、FinishLoad,返回NO则不加载这个请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页的回调
- (void)webViewDidStartLoad:(UIWebView *)webView;
//网页加载完毕的回调
- (void)webViewDidFinishLoad:(UIWebView *)webView;
//网页加载失败的回调
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

二、UIWebView与JS交互

1、OC调用JS
OC调用JS主要通过使用- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;这个方法来实现。传入你要执行的JS代码块,如果有返回值,可以接收NSString类型作为返回值。下面是获取网页Title并给导航控制器Title赋值的代码。

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //获取网页的title
    self.navigationItem.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}

注意:调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号需要进行转义在转义字符前加\),并且OC与JS交互只能传字符串类型,所以在调用前需转换成NSString类型。

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
  NSString *loginStr = [NSString stringWithFormat:@"loggedIn('%@','%@','%@')",[USER_DEFAULT objectForKey:KUID],[USER_DEFAULT objectForKey:KPhoneNumber],[USER_DEFAULT objectForKey:KNICKNAME]];
  ZYLog(@"%@",loginStr);
  [self.webView stringByEvaluatingJavaScriptFromString:loginStr];
}

2、JS调用OC
JS调用OC主要通过使用 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;这个方法。这种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    // 获取请求路径
    NSString *url = request.URL.absoluteString;
    // 定义的协议
    NSString *scheme = @"ios://";
    if ([url hasPrefix:scheme]) {
        // 获得协议后面的路径  path == sendMessage:message2:?200&300
        NSString *path = [url substringFromIndex:scheme.length];
        // 利用?切割路径 分割方法与参数
        NSArray *subpaths = [path componentsSeparatedByString:@"?"];
        // 方法名 methodName == sendMessage:number2:
        NSString *methodName = [subpaths firstObject];
        // 参数  200&300
        NSArray *params = nil;
        if (subpaths.count == 2) {
            params = [[subpaths lastObject] componentsSeparatedByString:@"&"];
        }
        // 调用本地函数
        [self performSelector:NSSelectorFromString(methodName) withObjects:params];
        return NO;
    }
    NSLog(@"想加载其他请求,不是想调用OC的方法");
    return YES;
}

注意:系统提供的performSelector函数至多只能传两个参数,如果想实现多个参数传递,参考这篇文章http://www.jianshu.com/p/c2415b064e20

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • IOS之UIWebView的使用 刚接触IOS开发1年多,现在对于 混合式 移动端开发越来越流行,因为开发成本上、...
    学无止境666阅读 45,770评论 5 53
  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 3,056评论 1 8
  • 一、简介 近两年随着HTML5的迅速发展与日趋成熟,越来越多的移动开发者选择使用HTML5来进行混合开发,不仅节约...
    RainyGY阅读 1,852评论 1 12
  • 一、简介 近两年随着HTML5的迅速发展与日趋成熟,越来越多的移动开发者选择使用HTML5来进行混合开发,不...
    宝宝teacher阅读 2,283评论 3 15
  • 儿子问 背很多的诗和文 有没有意义 因为大部分随着时间 都慢慢忘记 是这样 忘记诗句与华丽篇章 很正常也很容易 但...
    一度一阅读 134评论 0 0