转载 【iOS开发】网页JS与OC交互（JavaScriptCore） OC ----->JS
目标
本文介绍利用苹果在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的更多相关文章
- [转载]iOS开发之手势识别
感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...
- IOS开发之——objective-c与javascript交互
原文:http://blog.csdn.net/pjk1129/article/details/6936545 在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要 ...
- 转载iOS开发中常见的警告及错误
iOS警告收录及科学快速的消除方法 前言:现在你维护的项目有多少警告?看着几百条警告觉得心里烦么?你真的觉得警告又不是错误可以完全不管么? 如果你也被这些问题困惑,可以和我一起进行下面的操作. ...
- [转载] iOS开发分辨率那点事
1 iOS设备的分辨率 iOS设备,目前最主要的有3种(Apple TV等不在此讨论),按分辨率分为两类 iPhone/iPod Touch 普屏分辨率 320像素 x 480像素 Retina ...
- 转载 IOS开发之－－－static变量
Objective-C 支持全局变量 主要有两种实现方式: (1)第一种和C/C++中的一样, 使用"extern"关键词: (2)另外一种就是使用单例实现. (比如我们经常会把一 ...
- iOS开发 - Swift使用JavaScriptCore与JS交互
一.前言 在这个提倡敏捷开发和H5横行的年代,原生App内嵌入一些H5页面已经成为一种流行的趋势.一套H5页面就可以适配复杂的iOS和Android页面,大量节省了开发和维护时间,如果本来就有移动端网 ...
- iOS与Html5和JS之间的交互---学习笔记五
首先采用的框架是WebViewJavascriptBridge,采用这套框架可以方便的使iOS与JS交互 一. 流程图(主要介绍思路) 二.iOS端如何使用 首先导入#import "Web ...
- iOS开发学习概述及知识整理
设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...
- 那些在学习iOS开发前就应该知道的事（part 1）
英文原文:Things I wish I had known before starting iOS development—Part 1 http://www.cocoachina.com/ios/ ...
随机推荐
- 阅读 Android源码的一些姿势
日常开发中怎么阅读源码 找到正确的源码 IDE 是日常经常用的东西,Eclipse 就不说了,直接从 Android Studio(基于 IntelliJ Community 版本改造)开始. 我们平 ...
- Android开发必须知道SERVICE的10件事
这些年我在和其他安卓攻城狮交流时经常谈到的一个话题就是Service组件被开发者错误地理解,不管是新手还是老司机.这篇文章就是交流的成果. 这篇文章不会讲解Service的使用方法,这个要去看官方的( ...
- 【Mybatis】mybatis查询报错org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'areaName' in 'class java.lang.String'
mybatis查询报错: Caused by: org.apache.ibatis.reflection.ReflectionException: There is no getter for pro ...
- C#中out与ref区别
一.ref(参考)与out区别 1.out(只出不进) 将方法中的参数传递出去,在方法中将该参数传递出去之前需要在该方法起始赋初值:在方法外传递的该参数可以不用赋值: 简单理解就是:将一个东西抛出去之 ...
- 116 - Unidirectional TSP（DP）
多段图的最短路问题 . 运用了非常多的技巧 :如 记录字典序最小路径 . 细节參见代码: #include<bits/stdc++.h> using namespace std; con ...
- 【Docker】Docker管理平台 Rancher ---- 你应该学学Rancher是怎么做容器的管理的
Elasticsearch is a Lucene-based search engine developed by the open-source vendor, elastic. With pri ...
- ASP.NET MVC学习---（四）MVC初窥
前面三篇大幅度的介绍了EF框架 这并不是没有道理的 现在使用mvc开发一般都离不开ef 因为它们相结合可以为你带来完美的体验 当然 前面所描述的仅仅是ef框架的冰山一角 它是一门学问很深的功课 如果你 ...
- Node.js 网页瘸腿爬虫初体验
延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...
- TCP/IP详解 卷一（第十三章 IGMP：Internet组管理协议）
本章将介绍用于支持主机和路由器进行多播的Internet组管理协议(IGMP) 它让一个物理网络上的所有系统知道主机当前所在的多播组.多播路由器需要这些信息以便知道多播数据报应该向那些接口转发. 跟I ...
- mongo 增
mongodb存储的是文档,文档是json格式的对象,我们的增删改查,都要传输json对象 json是一个对象,js里有数组这个概念,只需要把多个对象放到一个数组里,即可 use test //首先选 ...