UIWebView与JS的交互方式

一,OC调用JS
直接调用苹果提供的API

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

使用方式:
OC部分:

[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

JS部分:

function add(a,b) {
return a+b;
}

二,JS调用OC
OC处理JS的时机在UIWebView的代理方法内

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

使用方式:
JS部分:

function btnClick1() {
location.href = "jsCallBack://method_?param1&param2"
}

OC部分:

NSString *schem = webView.request.URL.scheme;
if ([schem containsString:@"jsCallBack://"]) {
//action...
return NO;
}

WKWebView与JS的交互方式

一,OC调用JS
调用苹果提供的API

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

使用方式:
OC部分:

 [self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

JS部分:

function playSount() {
//playSount...
}

二,JS调用OC

OC部分:
这种使用方式比较麻烦一些
1.在创建wkWebView时,需要将被js调用的方法注册进去

//创建WKWebViewConfiguration文件
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.minimumFontSize = 10.f;
[config.userContentController addScriptMessageHandler:self name:@"playSound"];
//创建WKWebView类
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

2.在WKScriptMessageHandler代理方法中监听js的调用

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"playSound"]) {
[self playSound];
}
}

JS部分:

//JS响应事件
function btnClick() {
window.webkit.messageHandlers.playSound.postMessage(null);
}

利用JavaScriptCore库,WebView与JS的交互 

一,OC调用JS

    self.jsContent = [[JSContext alloc] init];

    NSString *js = @"function add(a,b) {return a + b}";
[self.jsContent evaluateScript:js];
JSValue *jsValue = [self.jsContent[@"add"] callWithArguments:@[@2,@3]];

二,JS调用OC

    self.jsContent = [[JSContext alloc] init];
self.jsContent[@"add"] = ^(int a, int b){
NSLog(@"a+b = %d",a+b);
}; [self.jsContent evaluateScript:@"add(10,20)"];

三,JS直接访问OC对象方法与属性

1.首先定义一个协议,这个协议遵守JSExport协议

@protocol JSExportTest <JSExport>
@property (nonatomic, assign) NSInteger sum;
JSExportAs(add, - (NSInteger)add:(int)a b:(int)b); @end

其中JSExportAs()是系统提供的宏,用来声明在JS环境中方法add与OC环境中方法- (NSInteger)add:(int)a b:(int)b对应。

2.创建一类,遵守JSExportTest协议,并实现它什么的方法与属性

@interface JSProtolObj : NSObject <JSExportTest>

@end

@implementation JSProtolObj

@synthesize sum = _sum;

- (NSInteger)add:(int)a b:(int)b {

    return a+b;
} - (void)setSum:(NSInteger)sum { _sum = sum;
} @end

3.使用方式:

    self.jsContent = [[JSContext alloc] init];

    self.jsContent.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception = exception;
NSLog(@"exception:%@",exception);
}; self.jsContent[@"OCobj"] = self.jsProtolObj;
[self.jsContent evaluateScript:@"OCobj.sum = OCobj.add(10,20)"];

这三种使用方式可以根据实际情况进行适当使用

WKWebView和WebView与JS的交互方式的更多相关文章

  1. WebView与 JS 交互方式

    前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...

  2. Android:你要的WebView与 JS 交互方式 都在这里了

    前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...

  3. webview与JS的交互

    webview与JS的交互 一:hybird app, web app 和 native app 的区别   Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...

  4. WebView与JS的几种交互

    http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCo ...

  5. WKWebView新特性及JS交互

    引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...

  6. UIWebView和WKWebView的使用及js交互

    UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复 ...

  7. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  8. 在Ubuntu15.10中,使用wxPython的webview和JS进行交互

    在Ubuntu下进行wxPython开发,因为需求,所以使用了wxPython的webview和JS的交互. 在Windows下,下图显示的代码可以正常的运行,但是在Ubuntu下进行开发,以下的代码 ...

  9. iOS webview注入JS

    - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...

随机推荐

  1. PHP 引用是个坑,请慎用

    去年我参加了很多次会议,其中八次会议里我进行了相关发言,这其中我多次谈到了 PHP 的引用问题,因为很多人对它的理解有所偏差.在深入讨论这个问题之前,我们先回顾一下引用的基本概念,明确什么是" ...

  2. NEO从入门到开窗(4) - NEO CLI

    一.唠叨两句 首先,我们都知道区块链是去中心化的,其中节点都是对等节点,每个节点都几乎有完整的区块链特性,CLI就是NEO的一个命令行对等节点,当然也有GUI这个项目,图形化的NEO节点.节点之间需要 ...

  3. js如何获取隐藏的元素的高度

    首先,正常情况下,确保div是有高度的. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. JavaScript(简介)【Javascript历史】

    学习一门知识应该了解其背景,很多人认为会用就行,起初我也是这么认为的,但后来才知道对起源的了解也很必要,从事javascript开发5年,今天开始总结一些笔记,分享下. 一.什么是JavaScript ...

  5. Beta No.1

    一.今日任务 重新熟悉整体项目 对整个项目在未来的beta冲刺中进程有一个合理的规划 由于我们送出的是一个负责前端的成员,引入的也是一个负责前端工作的女生,(女生做起美工比起男生更加得心应手吧)所以我 ...

  6. 如何查看与更改python的工作目录?

    在编写<机器学习实战>第二章kNN代码时遇到问题,即在自己编写好模块后,使用ipython进行import时,出现以下错误: 可知若想找到该模块,需将工作目录改变到当前文件(模块py文件) ...

  7. Linux下C编写基本的多线程socket服务器

    不想多说什么,会搜这些东西的都是想看代码的吧. 一开始不熟悉多线程的时候还在想怎么来控制一个线程的结束,后来发现原来有pthread_exit()函数可以直接在线程函数内部调用结束这个线程. 开始还想 ...

  8. 第201621123043 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 2 ...

  9. 201621123043 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型的定义: 泛型,即"参数化类型".一提到参数,最熟悉的就是定义方法时有形参,然后调用此 ...

  10. SDVN

    Software Defined Vehicular Networks VANET 车载自组网(VANET)是指在交通环境中车辆之间.车辆与固定接入点之间及车辆与行人之间相互通信组成的开放式移动Ad ...