IOS WebView中JS和OC相互调用

  现在有很多项目中都涉及到HTML5,在一个普通的APP里面嵌入HTML5网页,嵌入的这些网页在服务器把页面修改之后同样也能跟着修改,这样就能很方便的修改程序的展示内容。如果使用tabelView或者其他的控件展示内容的话,当展示的内容的样式需要发生改变的时候必须修改程序本身才能够达到修改的效果。所以,在APP里面HTML5的嵌入可以更加方便的维护程序的内容,但是由于现在受网速啊,手机性能等因素的影响导致HTML5的用户体验没有系统原生代码修改的APP好,所以针对这个JS和OC的项目调用,这里只是简单的讲讲,方便大家以后的学习和使用。


1.<font color='red'>JS调OC</font>

  在JS调用OC的时候,其实我使用的是取巧的办法,当我们使用webView加载网页的时候,每一次请求都会被webView的

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

代理方法捕捉到,然后我们就可以在该代理方法里面进行相应的操作,这里我们先看看我写的一个简单测试代码,首先看测试网页的源代码:

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <br/><br/>
    <button onclick="fn_call();">打电话</button>
    <br/><br/>
    <button onclick="fn_getmethon();">获取参数</button>
    <script type="text/javascript">
    function fn_call(){
        window.location.href='sn://call';
    }
    function fn_getmethon(){
        window.location.href='sn://getValue';
    }
    function fn_alertMsg(msg){
        alert(msg);
    }
    </script>
    </body>
</html>

在这个页面里面,有两个按钮,按钮点击之后分别调用两个方法,在方法里面使用window.location.href='sn://getValue'发送一个请求,但是这个请求的协议不是http所以页面不会进行跳转;接着我们在webView的代理方法里面捕捉事件。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    NSLog(@"打印请求的URL-->%@", url);
    NSRange range = [url rangeOfString:@"sn://"];
    NSUInteger location = range.location;
    if (location != NSNotFound) {
        NSString *methon = [url substringFromIndex:location + range.length];
        SEL fn = NSSelectorFromString(methon);
        [self performSelector:fn withObject:nil];
    }

    return YES;
}

- (void)call {
    NSLog(@"调用打电话");
}

当我们按了"打电话"这个按钮之后,控制台就会出现

这里写图片描述

这里我们就可以对得到的URL进行简单的截取啊,判断等操作,然后再执行需要执行的OC代码,我这里是调用了call()这个方法,这样就完成了JS对OC的调用。

2.<font color='red'>OC调JS</font>

  前面讲了JS对OC的调用,在这里OC调用JS的原理其实差不多,在最开始的html页面里面有一个"获取值"的按钮点击之后就会调用js方法,然后在OC里面捕捉到对应的方法

- (void)getValue {
    NSLog(@"调用获取值");
    NSMutableString *js = [NSMutableString string];
    [js appendString:[NSString stringWithFormat:@"fn_alertMsg('%@');", @"这是测试传值"]];
    [self.webView stringByEvaluatingJavaScriptFromString:js];
}

这这个方面里面我们主要记住要在webView执行js代码就要调用- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;这个方法,我们只需要传入需要执行的JS代码然后就可以在webView里面执行。先看看执行的效果:

执行结果
通过上面提到的的代码就完成了OC对JS的调用,在用OC对JS调用的时候我们要先测试JS代码的正确性,这样能提高我们的开发效率。

  好了,webView中JS和OC调用,以及OC和JS的调用就写到这里了,有不足的地方希望大家多提提,最后附上完整的代码,webView控件使用故事版拖的

@interface ViewController () <UIWebViewDelegate>
@property (strong, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:@"test.html"]];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    self.webView.delegate = self;
    [self.webView loadRequest:request];
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    NSLog(@"打印请求的URL-->%@", url);
    NSRange range = [url rangeOfString:@"sn://"];
    NSUInteger location = range.location;
    if (location != NSNotFound) {
        NSString *methon = [url substringFromIndex:location + range.length];
        SEL fn = NSSelectorFromString(methon);
        [self performSelector:fn withObject:nil];
    }

    return YES;
}

- (void)getValue {
    NSLog(@"调用获取值");
    NSMutableString *js = [NSMutableString string];
    [js appendString:[NSString stringWithFormat:@"fn_alertMsg('%@');", @"这是测试传值"]];
    [self.webView stringByEvaluatingJavaScriptFromString:js];
}

- (void)call {
    NSLog(@"调用打电话");
}

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

推荐阅读更多精彩内容