由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView.
相比与 UIWebView, WKWebView 存在很多优势:
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¶m2" }
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)"];
这三种使用方式可以根据实际情况进行适当使用
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。
本文向大家介绍详解 WebView 与 JS 交互传值问题,包括了详解 WebView 与 JS 交互传值问题的使用技巧和注意事项,需要的朋友参考一下 随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便。今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用。 如何将 Java 对象实例传值给 JS 其实将我们在 An
本文向大家介绍Android WebView与JS交互全面详解(小结),包括了Android WebView与JS交互全面详解(小结)的使用技巧和注意事项,需要的朋友参考一下 Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5具有开发速度快,更新不用依赖于App的更新,只
本文向大家介绍Android中WebView与Js交互的实现方法,包括了Android中WebView与Js交互的实现方法的使用技巧和注意事项,需要的朋友参考一下 获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持
本文向大家介绍Service Activity的三种交互方式(详解),包括了Service Activity的三种交互方式(详解)的使用技巧和注意事项,需要的朋友参考一下 service有两种类型: 本地服务(Local Service):用于应用程序内部 远程服务(Remote Sercie):用于android系统内部的应用程序之间 前者用于实现应用程序自己的一些耗时任务,比如查询升级信息,并
主要内容:本节引言:,1.核心步骤讲解:,2.使用示例讲解:,代码下载:,本节小结:本节引言: 在上一节中我们对Android的WebView(网页视图)进行了学习,相信已经了解了WebView的基本用法; 而本节我们要学习的就是通过:HTML -> JS ->Java来完成HTML5端与Android手机间的 互访!好的,话不多说,有吗有真相,让我们通过编写代码来体验这种微妙的联系吧~ PS:为了方便,本节用到的HTML都是以文件的形式放到assets目录下,只需通过 load
本文向大家介绍 Js和native交互的方法与问题 相关面试题,主要包含被问及 Js和native交互的方法与问题 时的应答技巧和注意事项,需要的朋友参考一下 实现JS和Native交互有两种方式: 第一种:shouldOverrideUrlLoading(WebView view, String url) 通过给WebView加一个事件监听对象(WebViewClient)并重写shouldOv