H5與原生頁(yè)面交互是一個(gè)很常見(jiàn)的需求。
app頁(yè)面調(diào)用h5方法很簡(jiǎn)單webView就有方法直接就可以調(diào)用JS方法這里不說(shuō)姻几。
我們今天說(shuō)說(shuō)h5頁(yè)面調(diào)用APP內(nèi)方法宜狐。
一. 實(shí)現(xiàn)方式有很多種,我知道有:
1.攔截跳轉(zhuǎn)地址蛇捌,這個(gè)方法很古老抚恒,做法是在webVIew將要跳轉(zhuǎn)網(wǎng)站時(shí)利用監(jiān)聽(tīng)使其不跳轉(zhuǎn),此時(shí)可以獲取到將要跳轉(zhuǎn)的地址络拌。讓h5吧數(shù)據(jù)放在一個(gè)地址中俭驮,然后app用上面方法就可以攔截。
2.一個(gè)三方的東西春贸,叫WebViewJavascriptBridge混萝,有興趣的可以看看,這個(gè)我用了好一段時(shí)間萍恕。
3.JSContext這個(gè)是iOS7以后出的今天就是要簡(jiǎn)單介紹一下這個(gè)逸嘀。
ps:上面這些都是對(duì)應(yīng)UIWebView,對(duì)于使用WKWebView的同學(xué)也有一個(gè)交互的方法下面說(shuō)允粤。
二. JSContext
1.簡(jiǎn)介:
JSContext實(shí)現(xiàn)的方法是--把H5中js方法里的一個(gè)對(duì)象指定為APP原生的對(duì)象崭倘,這樣js中就可以用這個(gè)對(duì)象調(diào)用到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];
//上面都是創(chuàng)建webView类垫,咱們不說(shuō)司光。下面是“把H5中js方法里的一個(gè)對(duì)象指定為APP原生的對(duì)象”這個(gè)操作,這里可改變的就是JSContextTest這個(gè)是js中對(duì)象的名字是由app與h5約定好的悉患。這樣js中JSContextTest這個(gè)對(duì)象就是你當(dāng)前的對(duì)象了残家。
JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"JSContextTest"] = self;
context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"異常信息:%@", exceptionValue);
};
對(duì)于上面說(shuō)的第二步j(luò)s用對(duì)像調(diào)用方法,這里面方法也是有規(guī)定的不是直接寫(xiě)一個(gè)方法就可以的售躁。這些方法必須是要放在一個(gè)繼承JSExport協(xié)議的協(xié)議里面跪削。例如:
//創(chuàng)建協(xié)議
@protocol JSObjcDelegate <JSExport>
- (void)call;
@end
//在上面指定的類(lèi)中實(shí)現(xiàn)協(xié)議
- (void)call{
NSLog(@"收到");
}
經(jīng)過(guò)上面的兩步操作js里面用JSContextTest調(diào)用call方法谴仙,APP原生就可以收到了迂求。
三.WKWebView 交互
1.簡(jiǎn)介:
原理和上面的是一個(gè)意思都是在js中指定一個(gè)對(duì)象碾盐,在這個(gè)對(duì)象調(diào)用方法時(shí),APP得到通知揩局。
2.用法
//設(shè)置Configuration毫玖,像js中注入一個(gè)對(duì)象叫jsCallOC這個(gè)對(duì)象指定為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有點(diǎn)區(qū)別,首先js調(diào)用的時(shí)候有特定的方法凌盯。ps:下面是js代碼
//js用這段代碼給app發(fā)送信息付枫,其中jsCallOC是和app約定好的對(duì)象名稱(chēng)
window.webkit.messageHandlers.jsCallOC.postMessage(要發(fā)送的JSON對(duì)象);
在app接受發(fā)來(lái)的信息驰怎,也是一個(gè)特定的方法阐滩,這個(gè)方法在協(xié)議WKScriptMessageHandler中掂榔,要指定當(dāng)前類(lèi)實(shí)現(xiàn)這個(gè)協(xié)議装获,然后在js發(fā)送信息是就會(huì)在這個(gè)協(xié)議里唯一的方法中接受到發(fā)送的信息厉颤。
//WKScriptMessageHandler協(xié)議中就這一個(gè)方法逼友,方法中message.body就是h5頁(yè)面發(fā)送的JSON數(shù)據(jù)
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"%@", message.body);
}
以上就是webVIew和js交互的簡(jiǎn)單用法帜乞。都沒(méi)有深究大家感興趣的可以一起研究。有什么事都可以直接找我状植。我無(wú)處不在哇哈哈~