iOS与JS交互的4种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dolacmeng/article/details/79623708

iOS与JS交互的方法:

1.拦截url(适用于UIWebView和WKWebView)
2.JavaScriptCore(只适用于UIWebView,iOS7+)
3.WKScriptMessageHandler(只适用于WKWebView,iOS8+)
4.WebViewJavascriptBridge(适用于UIWebView和WKWebView,属于第三方框架)

下面以假设的需求进行示例代码讲解,需求:
(1)h5页面调用原生扫二维码(h5调用原生)
(2)原生扫码成功后,将结果返回给h5(原生调用h5)

方法一. 拦截url

(1)web调用原生:

<1>和后端同事协定好协议,如jxaction://scan表示启动二维码扫描,jxaction://location表示获取定位。
<2>实现UIWebView代理的shouldStartLoadWithRequest:navigationType:方法,在方法中对url进行拦截,如果是步奏<1>中定义好的协议则执行对应原生代码,返回false,否则返回true继续加载原url。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.absoluteString hasPrefix:@"jxaction://scan"]) {
        //调用原生扫描二维码
       return NO;
    }
    return YES;
}

h5代码:

<a href="jxaction://scan">扫一扫(拦截url)</a>

(2)原生调用js

若(1)中扫描二维码结束后,需要把扫描结果返回给web页,直接调用UIWebView的stringByEvaluatingJavaScriptFromString:方法,或者WKWebView的 evaluateJavaScript:completionHandler:方法。

[self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('我是扫描结果~')"];

方法二. JavaScriptCore

方法一web调用原生只适合简单的调用,如果要传递参数,虽然也可以拼接在url上,如jxaction://scan?method=aaa,但是需要我们自行对字符串进行分割解析,并且特殊字符需要编码。在iOS7系统提供了JavaScriptCore,可以更优雅地实现js与原生的交互。
(1)js调用原生
<1>新建类继承自NSObject(如AppJSObject)。
<2>.h文件中声明一个代理并遵循JSExport,代理内的方法和js定义的方法名一致。
<3>.m文件中实现<2>代理中对应的方法,可以在方法内处理事件或通知代理。

AppJSObject.h

\#import <Foundation/Foundation.h>
\#import <JavaScriptCore/JavaScriptCore.h>

@protocol AppJSObjectDelegate <JSExport>

-(void)scan:(NSString *)message;

@end

@interface AppJSObject : NSObject<AppJSObjectDelegate>

@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;

@end

AppJSObject.m

#import "AppJSObject.h"

@implementation AppJSObject

-(void)scan:(NSString *)message{
    [self.delegate scan:message];
}

@end

h5代码:

<input type="button" name="" value="扫一扫" onclick="scan()">
<br/>
<p id="result">扫描结果:</p>

<script type="text/javascript">
    //调用APP的扫描方法   h5->app
    function scan(){
        app.scan('scanResult');
    }

    //扫描结果回调方法    app->h5
    function scanResult(result){
        document.getElementById("result").innerHTML = '扫描结果:' + result;  
    }
</script>

<4>在UIWebView加载完成的代理中把AppJSObject实例对象类注入到JS中,那么在js中调用方法就会调用到原生AppJSObject实例对象中对应的方法了。

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    AppJSObject *jsObject = [AppJSObject new];
    jsObject.delegate = self;
    context[@"app"] = jsObject;

}

代码:https://github.com/dolacmeng/JSDemo/tree/master
*也可以通过block实现而不创建新类AppJSObject:

context[@"openAlbum"] = ^(){
    NSLog(@"js调用oc打开相册");
};

(2)原生调用js

可以通过一中的方法,也可以通过JSContext:

JSContext *context=[_mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS= [NSString stringWithFormat:@"%@('%@')",_photoMethod,fileUrl];
[context evaluateScript:alertJS];

方法三. WKScriptMessageHandler

现在很多app都是支持iOS8+,很多人使用WKWebView代替了UIWebView,但是WKWebView并不支持方法二。此时我们可以使用WKWebView的WKScriptMessageHandler
<1>初始化WKWebView时,调用addScriptMessageHandler:name:方法,name为js中的方法名,如scan:

- (void)setupWKWebView{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [[WKUserContentController alloc] init];
    [configuration.userContentController addScriptMessageHandler:self name:@"scan"];

    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    webView.UIDelegate = self;
}

h5:

window.webkit.messageHandlers.scan.postMessage() 

<2>实现WKScriptMessageHandler代理方法,当js调用scan方法时,会回调此代理方法:


- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"scan"]) {
        //调用原生扫码
     }
}

方法四 WebViewJavascriptBridge

是一个第三方框架,官方文档和demo都很完整,不再累赘,GitHub地址:
https://github.com/marcuswestin/WebViewJavascriptBridge

展开阅读全文

没有更多推荐了,返回首页