gpt4 book ai didi

WKWebView、WebView和JS的交互方式详解

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章WKWebView、WebView和JS的交互方式详解由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 。

相比与 UIWebView, WKWebView 存在很多优势:

  • 支持更多的HTML5的特性
  • 高达60fps滚动刷新频率与内置手势
  • 与Safari相容的JavaScript引擎
  • 在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
  • 可获取加载进度等。

UIWebView与JS的交互方式 。

一,OC调用JS 。

直接调用苹果提供的API 。

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

使用方式:

OC部分:

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

 JS部分:

?
1
2
3
function add(a,b) {
  return a+b;
}

二,JS调用OC 。

OC处理JS的时机在UIWebView的代理方法内 。

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

使用方式:

JS部分:

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

 OC部分:

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

WKWebView与JS的交互方式 。

一,OC调用JS 。

调用苹果提供的API 。

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

使用方式:

OC部分:

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

 JS部分:

?
1
2
3
function playSount() {
  //playSount...
}

二,JS调用OC 。

OC部分:

这种使用方式比较麻烦一些 。

1.在创建wkWebView时,需要将被js调用的方法注册进去 。

?
1
2
3
4
5
6
//创建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的调用 。

?
1
2
3
4
5
6
7
#pragma mark - WKScriptMessageHandler
- ( void )userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
 
  if ([message.name isEqualToString:@ "playSound" ]) {
   [self playSound];
  }
}

 JS部分:

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

利用JavaScriptCore库,WebView与JS的交互 。

一,OC调用JS 。

?
1
2
3
4
5
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 。

?
1
2
3
4
5
6
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协议 。

?
1
2
3
4
5
@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协议,并实现它什么的方法与属性 。

?
1
2
3
4
5
6
7
8
9
10
11
12
@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.使用方式:

?
1
2
3
4
5
6
7
8
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)" ];

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

总结 。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我的支持.

原文链接:http://www.cnblogs.com/zhou--fei/p/8895041.html 。

最后此篇关于WKWebView、WebView和JS的交互方式详解的文章就讲到这里了,如果你想了解更多关于WKWebView、WebView和JS的交互方式详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com