您的位置:首页 > Web前端 > JavaScript

iOS JavaScriptCore 和 Web交互

2017-03-23 10:56 330 查看
首先引入 JavaScriptCore.frame

布局使用Masonry进行页面布局的

创建一个Test1ViewController 实例代码如下:

#import "Test1ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@interface Test1ViewController ()<UIWebViewDelegate>
{
UIWebView *_callWebview;
}
@property(nonatomic,strong)UIWebView *webView;
@property(nonatomic,weak)JSContext *context;
@end

@implementation Test1ViewController
-(UIWebView *)webView{
if (!_webView) {
_webView = [[UIWebView alloc]init];
[self.view addSubview:_webView];
[_webView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(WIDTH);
make.height.mas_equalTo(WIDTH);
make.top.mas_equalTo(0);
make.centerX.mas_equalTo(self.view.mas_centerX);
}];
NSString*path = [[NSBundle mainBundle]pathForResource:@"test2.html" ofType:nil];
NSURL*url = [[NSURL alloc]initFileURLWithPath:path];
// NSURL *url = [NSURL URLWithString:@"http://reg.longwl.com/htn/Test1.html"];
//NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

[_webView loadRequest:request];

}
return _webView;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.webView.delegate =self;
// Do any additional setup after loading the view.
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:btn1];
[btn1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(WIDTH/2.3);
make.height.mas_equalTo(WIDTH/6);
make.bottom.mas_equalTo(-10);
make.left.mas_equalTo(10);
}];
btn1.backgroundColor = [UIColor greenColor];
[btn1 setTitle:@"调用无参数函数" forState:UIControlStateNormal];
[btn1 addTarget:self action:@selector(btnAction1) forControlEvents:UIControlEventTouchUpInside];

UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:btn2];
[btn2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(WIDTH/2.3);
make.height.mas_equalTo(WIDTH/6);
make.bottom.mas_equalTo(-10);
make.right.mas_equalTo(-10);
}];
btn2.backgroundColor = [UIColor redColor];
[btn2 setTitle:@"调用参数函数" forState:UIControlStateNormal];
[btn2 addTarget:self action:@selector(btnAction2) forControlEvents:UIControlEventTouchUpInside];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma webviewdelegate
-(void)webViewDidStartLoad:(UIWebView *)webView{

}
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
return YES;
}

-(void)webViewDidFinishLoad:(UIWebView *)webView{
_context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
_context[@"test1"] = ^(){
[self method1];
};
_context[@"test2"] =^(){
NSArray*args =  [JSContext currentArguments];
NSString *name = args[0];
NSString *num = args[1];
[self method2:name and:num];
};
_context[@"test3"] =^(){
NSArray*args =  [JSContext currentArguments];
NSString *type = args[0];
NSString *telnum = args[1];
if ([type  isEqual: @"Tel"] && telnum.length==11) {
[self method3:type and:telnum];
}
};

}
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
NSLog(@"网页加载失败");
}
//JS 调用OC方法
-(void)method1{
[self showString:@"JS调用OC无参数"];
}
-(void)method2:(NSString*)name and:(NSString*)num{
[self showString:@"JS调用OC有参数"];
}
-(void)method3:(NSString*)name and:(NSString*)num{
//电话呼叫
NSString*str = [NSString stringWithFormat:@"tel:%@",num];
if (_callWebview!=nil) {
_callWebview =[[UIWebView alloc] initWithFrame:CGRectZero];
}
NSURL *telURL =[NSURL URLWithString:str];// 貌似tel:// 或者 tel: 都行
[_callWebview loadRequest:[NSURLRequest requestWithURL:telURL]];

}
//OC调用JS方法
-(void)btnAction1{
[_webView stringByEvaluatingJavaScriptFromString:@"OcCallJsfun1();"];
}
-(void)btnAction2{
[_webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"OcCallJsfun2('%@','%@');",@"bob",@"123"]];
}
-(void)showString:(NSString*)content{
UIAlertController *alertvc = [UIAlertController alertControllerWithTitle:@"提示" message:content preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}];
[alertvc addAction:action];
[self presentViewController:alertvc animated:YES completion:nil];
}
@end


HTML网页,我是加载本地的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript">
function JsCallOC1() {
test1();

}
function JsCallOC2() {
test2('带参数','IOS');
}
function JsCallOC3() {
test3('Tel','10086');
}
function OcCallJsfun2(name,num) {
alert(name+num);
}
function OcCallJsfun1() {
alert('调用无参数的JS方法');
}
</script>
<style type="text/css">
#a{
color:red;
}
</style>
<body bgcolor="aqua">
<button type="button" onclick="JsCallOC1()">调用无惨函数</button>
<button type="button" onclick="JsCallOC2()">调用有参数函数</button>
<a type="button" onclick="JsCallOC3()"id="tel">10086</a>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ios web 实例