标签:cape created 按钮 添加 ios 程序 meta adr 获取
本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互。我们想要达到的目标是:
JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境。
具体介绍请看这篇简书的文章:JavaScriptCore 使用
<!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
环境准备完成,开工
我们的html文件定义了一个js方法test1(),现在我们就来调用这个方法
在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/")"];
}
运行结果为:
-(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
标签:cape created 按钮 添加 ios 程序 meta adr 获取
原文地址:http://www.cnblogs.com/shenlaiyaoshi/p/5985594.html