脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScriptCore实现OC和JS交互

使用JavaScriptCore实现OC和JS交互详解

 更新时间：2017年03月28日 11:34:50   作者：快到碗里来____  
JavaScriptCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。下面这篇文章主要给大家介绍了使用JavaScriptCore实现OC和JS交互的相关资料，文中介绍的非常详细，需要的朋友可以参考学习，下面来一起看看吧。

JavaScriptCore

JavaScriptCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。iOS7后苹果在iPhone平台推出，极大的方便了我们对js的操作。

首先创建webView,读取本地的html文件

 NSURL* htmlURL = [[NSBundle mainBundle] URLForResource: @"demo" withExtension: @"html"];
[_webView loadRequest: [NSURLRequest requestWithURL: htmlURL]];

在demo中，我们要实现4种情况

  1. JS调用OC
  2. JS调用OC并传递参数
  3. OC调用JS
  4. OC调用JS并传递参数

html文件中代码如下

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
 function showAlert(){
  alert('OC call JS with no argument');
 }
 function showAlertWithString(string){
  alert(string);
 }
 function callOCWithArgument() {
  jsCallOCWithArgument('参数1 ','参数2 ','参数3');
 }
 </script>
</head>
<body>
 </br>
 </br>
 </br>
 </br>
 <form>
  <button type='button' onclick='callOC()'>jsCallOC</button>
  <button type='button' onclick='callOCWithArgument()'>jsCallOCWithArgument</button>
 </form>
</body>
</html>

JS调用OC

在webView的代理方法webViewDidFinishLoad中

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

 _context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 __weak typeof(self) weakSelf = self;
 _context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
  weakSelf.context.exception = exception;
 };

 //js调用OC
 _context[@"callOC"] = ^() {
  NSArray *args = [JSContext currentArguments];
  for (JSValue *jsVal in args) {
   NSLog(@"%@", jsVal.toString);
  }
  dispatch_async(dispatch_get_main_queue(), ^{
   UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:@"JS Call OC With No Argument" preferredStyle:UIAlertControllerStyleAlert];
   UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

   }];
   [alertView addAction:action];
   [weakSelf presentViewController:alertView animated:YES completion:nil];
  });
 };

 _context[@"jsCallOCWithArgument"] = ^() {
  NSArray *args = [JSContext currentArguments];
  NSMutableString * stirng = [NSMutableString string];
  for (JSValue * value in args) {
   [stirng appendString:value.toString];
  }
  dispatch_async(dispatch_get_main_queue(), ^{
   UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:stirng preferredStyle:UIAlertControllerStyleAlert];
   UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
   }];
   [alertView addAction:action];
   [weakSelf presentViewController:alertView animated:YES completion:nil];
  });
 }; 
}

我们定义一个block，然后保存到context里面，其实就是转换成了JS中命名为callOC的function。然后我们直接执行这个function，调用的就是我们的block里面的内容了。

传过来的参数可以通过[JSContext currentArguments]这个array接受，里面是JSValue对象。

OC调用JS

初始化两个Button，在点击事件中实现如下方法

- (IBAction)callJS:(id)sender {
 [_context evaluateScript:@"showAlert()"];
}
- (IBAction)callJSWithArguments:(id)sender {

 [_context evaluateScript:@"showAlertWithString('OC call JS with arguments')"];
// [_context[@"showAlertWithString"] callWithArguments:@[@"OC call JS with arguments"]];
}

即可实现OC调用JS。

demo已上传，需要的可以点此下载查看。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

相关文章

  • js微信分享实现代码

    js微信分享实现代码

    这篇文章主要为大家详细介绍了js微信分享的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js判断IE6/IE7/FF的代码[XMLHttpRequest]

    js判断IE6/IE7/FF的代码[XMLHttpRequest]

    js下通过XMLHttpRequest判断IE6/IE7/FF的代码，需要的朋友可以参考下。
    2011-02-02
  • bootstrapValidator自定验证方法写法

    bootstrapValidator自定验证方法写法

    这篇文章主要为大家详细介绍了bootstrapValidator自定验证方法写法，研究bootstrapValidator验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 5个让你眼前一亮的JavaScript装饰器技巧

    5个让你眼前一亮的JavaScript装饰器技巧

    JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为，本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用,需要的朋友可以参考下
    2023-06-06
  • JavaScript中let与const命令使用

    JavaScript中let与const命令使用

    本文主要介绍了JavaScript中let与const命令使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JS远程获取网页源代码实例

    JS远程获取网页源代码实例

    获取网页源代码的方法有很多，本文为大家介绍下使用JS是如何做到的，感兴趣的朋友可以学习下哦
    2013-09-09
  • JavaScript创建一个欢迎cookie弹出窗实现代码

    JavaScript创建一个欢迎cookie弹出窗实现代码

    欢迎cookie想必大家早有耳闻,利用cookie记录用户状态信息，当用户再次访问的时候弹出欢迎框，个人感觉还不错吧，希望对你学习cookie有所帮助
    2013-03-03
  • JavaScript设计模式--简单工厂模式定义与应用案例详解

    JavaScript设计模式--简单工厂模式定义与应用案例详解

    这篇文章主要介绍了JavaScript设计模式--简单工厂模式定义与应用,结合具体案例形式详细分析了JavaScript设计模式中简单工厂模式基本概念、定义、用法与相关注意事项,需要的朋友可以参考下
    2020-05-05
  • Autocomplete Textbox Example javascript实现自动完成成功

    Autocomplete Textbox Example javascript实现自动完成成功

    Autocomplete Textbox Example javascript实现自动完成成功...
    2007-08-08
  • javascript实现英文首字母大写

    javascript实现英文首字母大写

    本文给大家总结了几种可以实现英文首字母大写的javascript脚本，另附上一个CSS的实现方法，非常的简单实用，这里推荐给大家，有需要的小伙伴可以参考下。
    2015-04-04

最新评论