技术改变生活

Technology changes life,Life-long learning

webview与js交互

1.iOS调用js方法

  • 先看下js的方法

上面就是js的方法,methodName是方法名由iOS和js双方约定,括号里就是参数,传什么参数也是由双方约定好的。

  • 下面是iOS调用js的方法(共有两种方法)
    方法一:

webview:是你自己创建的UIWebview
methodName:js方法名
parameter:传给js的参数

这个方法需要写在webview加载完网页后才会生效。如果网页还没加载完就调用这个方法去调用js的方法,那么是调不到的。所以想在网页刚加载的时候或者在加载途中就调用js方法传参是不可能实现的。

这个方法比较适合给js传些简单的字符串参数,数组、字典、json字符串、对象这些是传不过去的。

如果js方法有多个参数,iOS在调用js方法传参时多个参数用,隔开。例如:
js方法

iOS调用

  • 方法二(js方法就不写了,跟上面一样的)
    iOS调用

methodName:js方法名
parameter1:参数1
parameter2:参数2

这个调用js的方法需要注意的是参数必须写在数组里

《webview与js交互》

ios调用js方法.png

大家可以看到这个方法要求的就是数组。而并不是js要求传数组

这个方法也是不能传oc的一些对象的,因为语法的不同所以js并不认识oc的对象,但是json是双方都认识的,所以一些复杂的数据可以用json字符串传

2.js调用iOS

  • 1.最简单直接的方法是拦截url
    先看下js端是怎么写的

methodName:// 这个是ios和js双方自己商量好的。这个是把http://改成了methodName://,当然//后面也可以有别的内容,这个就是看你们双方是怎么定的了。

ios端拦截url并做一些相应的操作

上面这个方法是webview的一个代理方法。webview在开始加载网页的时候都会走这个方法,在这个方法里可以获取到网页的url。js的window.location.href = ‘methodName://’这个方法就是网页加载url的方法,所以js一执行这个方法ios这边的方法就能拦截到。

在方法中需返回YES和NO,如果返回YES则网页继续加载,否则就不加载。因为methodName://这个url是错误的,我们只是想通过这个调用oc而不是真的去加载这个错误的url所以在拦截到了methodName://后返回NO。

上面oc方法中
NSString * requestStr = request.URL.absoluteString;
NSLog(@”URL:%@”,requestStr);
这个是获取url
if ([request.URL.scheme isEqualToString:@”methodName”]){
//这里做oc相应的操作
return NO;
}
这个是根据协议头来判断是不是methodName://

  • 2.js调用iOS方法二

这个方法写在哪里呢?

  • 只要网页加载完以后调用都是可以的。当然最好是写在-(void)webViewDidFinishLoad:(UIWebView *)webView这个方法里

上面这个是oc注册方法给js调用,方法名就是methodName。
NSArray *args = [JSContext currentArguments];是js传过来的参数,js那边传过来的不是数组,而是这个[JSContext currentArguments]方法把参数转化成了数组。下面先看下js是怎么调用的,就是知道参数是怎么回事了。

这个就是js调用oc的方法,methodName是方法名,parameter1和parameter2是两个参数,参数是双方定好的,可以传一个参数也可以多个,多个参数就用,隔开。

js端传的是这两个参数,但在oc端接收的时候却是以数组形式接受的NSArray *args = [JSContext currentArguments];
所以args数组中args[0]就是第一个参数。但是args里包含元素是JSValue,并不是oc中的字符串什么的,所以还得转化一下。
转化为字符串:[args[0] toString]
下面是转化为各种类型的方法

3.oc调用js window.close方法

  • 先在webview加载完全的方法里注册下js

将window.close转为back:// 当js调用window.close时自动调用back://,所以在代理方法中可以拦截到back://,然后再做相应的操作

原文始发于:webview与js交互

点赞