H5与原生页面交互是一个很常见的需求。
app页面调用h5方法很简单webView就有方法直接就可以调用JS方法这里不说。
我们今天说说h5页面调用APP内方法。
一. 实现方式有很多种,我知道有:
1.拦截跳转地址,这个方法很古老,做法是在webVIew将要跳转网站时利用监听使其不跳转,此时可以获取到将要跳转的地址。让h5吧数据放在一个地址中,然后app用上面方法就可以拦截。
2.一个三方的东西,叫WebViewJavascriptBridge,有兴趣的可以看看,这个我用了好一段时间。
3.JSContext这个是iOS7以后出的今天就是要简单介绍一下这个。
ps:上面这些都是对应UIWebView,对于使用WKWebView的同学也有一个交互的方法下面说。
二. JSContext
1.简介:
JSContext实现的方法是--把H5中js方法里的一个对象指定为APP原生的对象,这样js中就可以用这个对象调用到APP原生中的方法了。
2.用法
UIWebView * webView = [[UIWebView alloc]initWithFrame:self.view.bounds];
webView.delegate = self;
NSString* path = [[NSBundle mainBundle] pathForResource:@"HelloWorld" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[webView loadRequest:request];
//上面都是创建webView,咱们不说。下面是“把H5中js方法里的一个对象指定为APP原生的对象”这个操作,这里可改变的就是JSContextTest这个是js中对象的名字是由app与h5约定好的。这样js中JSContextTest这个对象就是你当前的对象了。
JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"JSContextTest"] = self;
context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息:%@", exceptionValue);
};
对于上面说的第二步js用对像调用方法,这里面方法也是有规定的不是直接写一个方法就可以的。这些方法必须是要放在一个继承JSExport协议的协议里面。例如:
//创建协议
@protocol JSObjcDelegate <JSExport>
- (void)call;
@end
//在上面指定的类中实现协议
- (void)call{
NSLog(@"收到");
}
经过上面的两步操作js里面用JSContextTest调用call方法,APP原生就可以收到了。
三.WKWebView 交互
1.简介:
原理和上面的是一个意思都是在js中指定一个对象,在这个对象调用方法时,APP得到通知。
2.用法
//设置Configuration,像js中注入一个对象叫jsCallOC这个对象指定为self
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addScriptMessageHandler:self name:@"jsCallOC"];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
//使用带有配置的init方法指定Configuration
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectOffset(self.view.bounds, 0, 30)configuration:wkWebConfig];
这样配置就可以了在具体使用上和JSContext有点区别,首先js调用的时候有特定的方法。ps:下面是js代码
//js用这段代码给app发送信息,其中jsCallOC是和app约定好的对象名称
window.webkit.messageHandlers.jsCallOC.postMessage(要发送的JSON对象);
在app接受发来的信息,也是一个特定的方法,这个方法在协议WKScriptMessageHandler中,要指定当前类实现这个协议,然后在js发送信息是就会在这个协议里唯一的方法中接受到发送的信息。
//WKScriptMessageHandler协议中就这一个方法,方法中message.body就是h5页面发送的JSON数据
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"%@", message.body);
}
以上就是webVIew和js交互的简单用法。都没有深究大家感兴趣的可以一起研究。有什么事都可以直接找我。我无处不在哇哈哈~