js与native交互

时间：2022-09-23 10:49:15

js与native交互

UIWebView

Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本。

//script即为要执行的js方法名称

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

PS：苹果推荐iOS8之后的app使用WKWebView来代替UIWebView，同时也使用方法 evaluateJavaScript:completionHandler:来替代stringByEvaluatingJavaScriptFromString，因为会一直等待stringByEvaluatingJavaScriptFromString方法执行完毕

JS调用Native，需要通过UIWebView拦截跳转请求并判断请求头是否是协商好的协议头来判断是否是JS发起调用Native的请求。

- webView:shouldStartLoadWithRequest:navigationType:

function callNative{

    var url = ”callNative://nslogHelloWord“

     window.location.href = url;

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

    //callNative 为约定好的协议头，如果是，则页面不进行跳转

    if ([request.URL.scheme isEqualToString:@"callNative"]) {

        NSlog(@"Hello World");

        return NO;

    }

    //不是自定义协议头，跳转页面

    return YES;

}

WKWebView

苹果自iOS8、OS X 10.10推荐使用WKWebView来代替原先的UIWebView，WKWebView拥有更快的加载速度和性能，更低的内存占用，同时更细致的代理分类来满足不同需要的调用。

Native调用JS,使用方法evaluateJavaScript:completionHandler:来解释执行脚本。

//javaScriptString要执行的js方法

//completionHandler执行结束回调或者发生错误时回调

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *error))completionHandler;

JS调用Native，通过代理WKScriptMessageHandler来实现调用。

#import "WKWVController.h"

#import <WebKit/WebKit.h>

@interface WKWVController ()<WKUIDelegate,WKScriptMessageHandler>

@property (strong, nonatomic) WKWebView *webView;

@end

@implementation WKWVController

- (void)viewDidLoad {

    [super viewDidLoad];

    // js配置

    WKUserContentController *userContentController = [[WKUserContentController alloc] init];

    //监听方法名

    [userContentController addScriptMessageHandler:self name:@"jsCallOC"];

    // WKWebView的配置

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

    configuration.userContentController = userContentController;

    // 显示WKWebView

    _webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds configuration:configuration];

    _webView.UIDelegate = self; // 设置WKUIDelegate代理

    [self.view addSubview:_webView];

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];

    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];

    [_webView loadRequest:urlRequest];

}

// WKScriptMessageHandler protocol?

- (void)userContentController:(WKUserContentController *)userContentController

      didReceiveScriptMessage:(WKScriptMessage *)message

{

    NSLog(@"方法名:%@", message.name);

    NSLog(@"参数:%@", message.body);

    // 方法名

    NSString *methods = [NSString stringWithFormat:@"%@", message.name];

    SEL selector = NSSelectorFromString(methods);

    // 调用方法

    if ([self respondsToSelector:selector]) {

        [self performSelector:selector withObject:message.body];

    } else {

        NSLog(@"未实行方法：%@", methods);

    }

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

}

- (void)jsCallOC{

    [self.webView evaluateJavaScript:@"wkNativeCallJS('嘿嘿')" completionHandler:^(id _Nullable data, NSError * _Nullable error) {

        NSLog(@"我执行完毕");

    }];

}


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

            <title>网页</title>

    </head>

    <body>

        <button onclick="wkWebViewTestClick()" style="height: 100px;width: 200px;">点我调用native方法</button>

        function wkNativeCallJS(info){

            //wkwebview 不直接使用js的alert 显示不了

            //http://*.com/questions/34185339/wkwebview-javascript-confirm-and-alert-not-working

            console.log(info);

        }

      function wkWebViewTestClick(){

            // 复杂数据

            var list = [1,2,3];

            var dict = {"name":"阳君", "qq":"937447974"};

            // JS通知WKWebView，jsCallOC即为在controller中注册的方法名称

            window.webkit.messageHandlers.jsCallOC.postMessage(dict);

        }

        </script>

    </body>

</html>

JavaScriptCore方式相互调用

在iOS7.0中苹果公司增加了JS利器JavaScriptCore框架，JavaScriptCore提供了很多灵活的本地OC与JS的交互方式，通过JSContext和JSValue来完成的，JSContext是一个WebView中js代码运行环境，js可以通过JSContext以block和通过继承JSExport代理，自定义实现代理方法。

#import "WVController.h"

#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSObjcDelegate <JSExport>

-(void)logInfo:(NSString*)info;

@end

@interface WVController ()<JSObjcDelegate>

@property (weak, nonatomic) IBOutlet UIWebView *wv;

@property (nonatomic, strong) JSContext *jsContext;

@end

@implementation WVController

- (void)viewDidLoad {

    [super viewDidLoad];

    NSString* path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];

    NSURL* url = [NSURL URLWithString:path];

    NSURLRequest* request = [NSURLRequest requestWithURL:url];

    [self.wv loadRequest:request];

}

//oc调用js

- (IBAction)callJSMethod:(id)sender {

    [self.wv stringByEvaluatingJavaScriptFromString:@"wvNativeCallJS()"];

}

//使用url拦截

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

    if ([request.URL.scheme isEqualToString:@"callnative"]) {

        NSLog(@"hello world");

        return false;

    }

    return true;

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    //获取上下文对象

    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    self.jsContext[@"Objc"] = self;

    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {

        context.exception = exceptionValue;

        NSLog(@"异常信息：%@", exceptionValue);

    };

    //直接使用block方式执行oc方法

    self.jsContext[@"logHello"] = ^(){

        NSLog(@"hello");

    };

}

//使用代理接口方式执行native方法

-(void)logInfo:(NSString *)info{

    NSLog(@"js传来的参数%@",info);

    JSValue* callback = self.jsContext[@"wvNativeCallJS"];

    [callback callWithArguments:nil];

}

@end


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

            <title>网页</title>

    </head>

    <body>

//1

      <button onclick="Objc.logInfo('哈哈')" style="height: 100px;width: 200px;">点我调用native方法</button>

//2

<!--        <button onclick="logHello()" style="height: 100px;width: 200px;">点我调用native方法</button>-->

        <script type="text/javascript">

            function wvNativeCallJS(){

                alert("wvController");

            }

        </script>

    </body>

</html>

DEMO：下载Demo

参考：

js与native交互的更多相关文章

  1. iOS&colon; JS和Native交互的两种方法

    背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)stringByEvaluatingJavaScriptFromString:(NS ...

  2. js和native交互方法浅析

    一.背景 最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路. 二.解决方案之WebViewJavascriptBridge 想要和app交互,必须在app上先把bridge进 ...

  3. CEF3开发者系列之JS与C&plus;&plus;交互之一

    JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...

  4. js与native的交互

    WebView与Javascript交互(Android): WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具 ...

  5. iOS JS 和 OC交互 &sol; JS 和 native 相互调用

    现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native  OC代码 第一种机制 ( ...

  6. 史上最全的 UIWebview 的 JS 与 OC 交互

    来源:伯乐在线 - 键盘风筝 链接:http://ios.jobbole.com/89330/ 点击 → 申请加入伯乐在线专栏作者 其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借 ...

  7. UIWebView与JS的深度交互

    我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...

  8. UIWebView与JS的深度交互-b

    要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &gt ...

  9. MXBridge - 插件式JS与OC交互框架

    概述 MXBridge,提供一个插件式的JavaScript与Objective-C交互的框架,通过JavaScriptCore实现,插件式扩展Obejctive-C接口以供JavaScript调用. ...

随机推荐

  1. SQL Server2014 SP2关键特性

    SQL Server2014 SP2关键特性 转载自:https://blogs.msdn.microsoft.com/sqlreleaseservices/sql-2014-service-pack ...

  2. SQL Server存储&lpar;7&sol;8&rpar; ：理解BCM页

    今天我们来讨论下批量更改映射(Bulk Changed Map:BCM)页,还有大容量日志恢复模式( bulk logged recovery model )如何运作的. 批量更改映射(Bulk Ch ...

  3. spring boot Swagger 集成

    1. pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  4. &dollar;watch How the &dollar;apply Runs a &dollar;digest

    作者:junyuecao | 发表于 8-8 13:39 | 最后更新时间:8-9 02:34 原文地址:http://angular-tips.com/blog/2013/08/watch-how- ...

  5. 异步加载回来的数据不受JS控制了

    写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...

  6. Mac 安装、卸载JDK 1&period;6

    卸载 输入 sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin sudo rm -fr /Library/Preferenc ...

  7. python学习记录（一）

    1.打印操作 >>> print('hello') hello >>> print(1+2) 3 2.字符串操作 ① ') Traceback (most rece ...

  8. 冬瓜头答疑：磁盘阵列内部FC-AL的性能问题

    冬瓜头答疑:磁盘阵列内部FC-AL的性能问题 作者:冬瓜头出处:IT专家网2009-08-03 09:59   问: 大多数磁盘阵列都是通过两个控制器后端的端口,组成1/2/4条FC-AL环,来连接所 ...

  9. ARKit从入门到精通

    ARKit从入门到精通(10)-ARKit让飞机绕着你飞起来 ARKit从入门到精通(9)-ARKit让飞机跟着镜头飞起来 ARKit从入门到精通(8)-ARKit捕捉平地 ARKit从入门到精通(7 ...

  10. js中的函数参数问题

    js函数没有Java中的重载现象.js函数的参数是放在arguments的容器里面的. <script  type="text/javascript"> functio ...

相关文章