目标

本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互。我们想要达到的目标是:

  • OC调用网页上的js方法
  • 网页js调用APP中的OC方法

JavaSciptCore.framework框架介绍

JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境。
具体介绍请看这篇简书的文章:JavaScriptCore 使用

准备环境

  • 创建一个名为JS与OC交互Demo的iOS工程。然后在storyboard添加一个UIWebVeiw,并设置上下左右约束为0,背景设为白色。
  • 刚才创建的webView作为ViewController的属性。用webView加载百度界面
  • 编写html文件
    由于没有现成的网页能够符合我们这篇文章的需求,所以楼主自己做了一个本地的html文件。作为我们的素材。
<!DOCTYPE html>
<html lang="en"> <head>
    <meta charset="utf-8">
    <title>JS与OC交互</title>     <!--  定义js函数  -->
    <script type="text/JavaScript">
        function test1()
        {
            alert("我是被OC调用的js方法")
        }
    </script> </head>
<body>
    <br /><br /><br /><br />     <!-- 创建一个按钮,点击就调用  printHelloWorld()  方法 -->
    <button onclick="printHelloWorld()">在Xcode控制台打印HelloWold</button> </body>
</html>

html的代码很简单
首先是在head里面定义了一个js函数test1()。调用这个函数会弹出一个alert窗口。

<!--  定义js函数  -->
    <script type="text/JavaScript">
        function test1()
        {
            alert("我是被OC调用的js方法")
        }
    </script>

body里面创建了一个按钮,点击按钮会调用printHelloWorld()方法。这里没有定义这个方法的实现,等下我们会在OC代码中定义

    <!-- 创建一个按钮,点击就调用 printHelloWorld()   函数 -->
    <button onclick=" printHelloWorld() ">在Xcode控制台打印HelloWold</button>

好了,现在我们可以加载这个本地html文件了。

//
//  ViewController.m
//  JS与OC交互Demo
//
//  Created by 石学谦 on 16/7/9.
//  Copyright © 2016年 shixueqian. All rights reserved.
// #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> //webView
@property (weak, nonatomic) IBOutlet UIWebView *webView; @end @implementation ViewController - (void)viewDidLoad {
    [super viewDidLoad];     //设置webView代理
    self.webView.delegate = self;     //获取本地html路径
    NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
    //中文路径要转码
    path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];     //加载html
    NSURL *url = [NSURL URLWithString:path];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request]; } -(void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"网页加载完成");
} @end

环境准备完成,开工

OC调用网页上的JS方法

我们的html文件定义了一个js方法test1(),现在我们就来调用这个方法

  • 先导入JavaScriptCore.framework。工程->Build Phases->Link Binary With Libraries->点击“+”->输入“JavaScriptCore”->Add

  • 在ViewController.m导入头文件#import <JavaScriptCore/JavaScriptCore.h>。

  • 写代码

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"网页加载完成");     [self demo1];
} - (void)demo1 {
    //创建JSContext对象,(此处通过当前webView的键获取到jscontext)
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];     //OC调用JS方法
    [context evaluateScript:@"test1()"];
}
  • 运行之后会弹出一个alert窗口,证明html上的js方法test1被调用了

  • 上面的代码都是无参的,加入是有参数的呢?
    我们在html文件中加一个js方法test3(a,b)。方法有两个参数。

      <!--  定义js函数  -->
      <script type="text/JavaScript">
          function test3(a,b)
          {
              alert("我是被OC调用的js方法" + a + b)
          }
      </script>

    然后在ViewController.m里面调用

-(void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"网页加载完成"); //    [self demo1];
    [self demo2];
} //OC调用有多个参数的JS方法
- (void)demo2 {
    //创建JSContext对象
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];
    [context evaluateScript:@"test1(/"我是参数a/",/"我是参数b/")"];
}

运行结果为:

  • 上面是OC调用html中定义的JS方法。我们还可以在iOS程序里面写一段JS代码来调用。
-(void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"网页加载完成"); //    [self demo1];
//    [self demo2];
    [self demo3];
} //OC调用OC代码写出来的js方法
- (void)demo3 {
    //创建JSContext对象
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];
    //JS代码
    NSString *jsCode = [NSString stringWithFormat:@"alert(/"我是OC里面的js方法/")"];     //OC调用JS方法
    [context evaluateScript:jsCode];
}

运行结果如下:

转载 【iOS开发】网页JS与OC交互(JavaScriptCore) OC ----->JS的更多相关文章

  1. [转载]iOS开发之手势识别

    感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

  2. IOS开发之——objective-c与javascript交互

    原文:http://blog.csdn.net/pjk1129/article/details/6936545 在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要 ...

  3. 转载iOS开发中常见的警告及错误

    iOS警告收录及科学快速的消除方法     前言:现在你维护的项目有多少警告?看着几百条警告觉得心里烦么?你真的觉得警告又不是错误可以完全不管么? 如果你也被这些问题困惑,可以和我一起进行下面的操作. ...

  4. [转载] iOS开发分辨率那点事

    1 iOS设备的分辨率 iOS设备,目前最主要的有3种(Apple TV等不在此讨论),按分辨率分为两类 iPhone/iPod Touch 普屏分辨率    320像素 x 480像素 Retina ...

  5. 转载 IOS开发之---static变量

    Objective-C 支持全局变量 主要有两种实现方式: (1)第一种和C/C++中的一样, 使用"extern"关键词: (2)另外一种就是使用单例实现. (比如我们经常会把一 ...

  6. iOS开发 - Swift使用JavaScriptCore与JS交互

    一.前言 在这个提倡敏捷开发和H5横行的年代,原生App内嵌入一些H5页面已经成为一种流行的趋势.一套H5页面就可以适配复杂的iOS和Android页面,大量节省了开发和维护时间,如果本来就有移动端网 ...

  7. iOS与Html5和JS之间的交互---学习笔记五

    首先采用的框架是WebViewJavascriptBridge,采用这套框架可以方便的使iOS与JS交互 一. 流程图(主要介绍思路) 二.iOS端如何使用 首先导入#import "Web ...

  8. iOS开发学习概述及知识整理

    设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...

  9. 那些在学习iOS开发前就应该知道的事(part 1)

    英文原文:Things I wish I had known before starting iOS development—Part 1 http://www.cocoachina.com/ios/ ...

随机推荐

  1. C#练习DataReader(转载)

    本文转自http://www.cnblogs.com/Mysterious/p/3422901.html SQL代码: create database ThreeDb go USE ThreeDb; ...

  2. 重要的ui组件——Behavior

    v7包下的组件类似CoordinatorLayout推出也有一段时间了,大家使用的时候应该会体会到其中很多的便利,今天这篇文章带大家来了解一个比较重要的ui组件——Behavior.从字面意思上就可以 ...

  3. Linqpad使用(调试Linq、结合linq调试业务场景、表格内编辑数据)

      linqpad是一款linq语句调试工具,功能如下: 1.直接执行linq语句并查看生成的原生sql语句 2.可结合linq+C#代码进行业务场景调试 3.表格内直接新增.修改.删除数据 4.直接 ...

  4. ubuntu14.04安装 chrome

    安装谷歌浏览器,只需要三行代码: 打开终端,输入 cd /tmp 对于谷歌Chrome32位版本,使用如下链接: wget https://dl.google.com/linux/direct/goo ...

  5. C++完美实现Singleton模式[转]

    Singleton模式是常用的设计模式之一,但是要实现一个真正实用的设计模式却也不是件容易的事情.1. 标准的实现class Singleton{public: static Singleton * ...

  6. zoj 3430 Detect the Virus(AC自己主动机)

    题目连接:zoj 3430 Detect the Virus 题目大意:给定一个编码完的串,将每个字符相应着表的数值转换成6位二进制.然后以8为一个数值,又一次形成字符 串,推断给定询问串是否含有字符 ...

  7. JAVA之方法的重载

    package com.test; //方法重载(overload)定义://1.方法名称相同//2.方法的参数类型.个数.顺序至少有一项不同//3.方法的返回类型可以不同//4.方法的修饰符可以不同 ...

  8. 分布式服务自增长唯一ID小结

    1.常用生成唯一ID的方式,例如UUID 2.生成唯一自自增长ID方式: 例如: Zookeeper的增加ID: redis的incr方法 mongodb的objectId 3.采用雪花模型 如下代码 ...

  9. 安装ansj分词器

    项目地址:https://github.com/4onni/elasticsearch-analysis-ansj https://github.com/laigood/elasticsearch-a ...

  10. zabbix通过percona插件监控mysql

    percona zabbix mysql-plugin是percona发布的一个使用zabbix监控mysql数据库的工具,这款工具比zabbix自带的监控模板要强大的多,毕竟percona是Mysq ...