最近用到js调用原生方法，在这里做个总结记录。
调用原生时会用到JSContext，官方文档解释如下：
/*!
@interface
@discussion A JSContext is a execution environment. All
execution takes place within a context, and all values
are tied to a context.
*/
JSContext是一个JS运行环境，也就是上下文的意思吧，也就相当于拿到了这个JSContext拿到了JS运行环境，可以利用JSContext直接进行操作JS。
使用：
1.声明一个协议MyJSExport，这个协议必须遵循 JSExport，给协议添加协议方法，协议方法必须是required
2.创建一个对象这个对象必须遵循MyJSExport协议，或者为一个对象添加MyJSExport协议
3.实例化一个JSContext对象，jsContext
4.给新创建的JSContext对象赋值，并调用对应的方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@\"documentView.webView.main . Context\"];
//这种方法不需要构建对象模型，也就是上面的1、2步都不需要 但是添加一个方法都需要写一个block
self.jsContext[@\"test1\"] = ^(){
};
//方法二 模型注入 在JS中直接调用NAtive .方法名 就可以了（方法必须在MyJSExport协议中声明）
self.jsContext[@\"Native \"] = self;
}
代码部分：
WebViewViewController.m
#import \"WebViewViewController.h\"
#import < Core/ Core.h>
@protocol MyJSExport <JSExport>
- (void)test1;
- (void)test2;
@end
@interface WebViewViewController ()<UIWebViewDelegate,MyJSExport>
@property (nonatomic,strong) JSContext *jsContext;
@property (nonatomic,strong) UIWebView *webView;
@end
@implementation WebViewViewController
- (void)viewDidLoad {
self.webView = [[UIWebView alloc] init];
self.webView. = CGRectMake(0, 0, self.view. .size.width, self.view. .size.height);
self.webView.delegate = self;
[self.view addSubview:self.webView];
NSURL *url = [[NSBundle mainBundle] URLForResource:@\"a\" withExtension:@\"html\"];
[self.webView loadRequest:[NSURLRequest requestWithURL:url]];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@\"documentView.webView.main . Context\"];
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *ex){
context.exception = ex;
NSLog(@\"异常信息%@\",ex);
};
self.jsContext[@\"Native \"] = self;
self.jsContext[@\"test1\"] = ^(){
NSLog(@\"test1调用了\");
};
}
- (void)test2{
NSLog(@\"方法2调用了\");
}
a.html
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
< >JSAndNative</ >
</head>
<style>
.main-wrap ul {
width: 100%;
display: inline-block;
padding-top: 20px;
}
.main-wrap ul li {
float: left;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
margin-bottom: 20px;
background-color: #00D000;
color: #fff;
text-align: center;
}
.main-wrap ul li:active {
opacity: 0.8;
}
</style>
<body bgcolor=\"#dddd\">
<div class=\"main-wrap\">
<ul class=\"postNative\">
<li =\"JS_Native1()\">fun1</li>
<li =\"JS_Native2()\">fun2</li>
</ul>
</div>
< >
function JS_Native1() {
test1();
}
function JS_Native2() {
Native .test2();
}
</ >
</body>
</html>
继续阅读与本文标签相同的文章
-
word公式编辑器的使用方法
2026-05-19栏目： 教程
-
库克有多牛？上任8年，让苹果营收涨4倍，市值涨4倍，全球第一
2026-05-19栏目： 教程
-
道通奔驰在线编程全新版本V17.00正式发布
2026-05-19栏目： 教程
-
《吊打面试官》系列-Redis基础
2026-05-19栏目： 教程
-
税控盘操作流程大全！
2026-05-19栏目： 教程