IOS开发中Objective-C与JS互相调用实例教程
本文我们来讲讲iOS系统上通用的本地Objective-C代码与Javascript互操作的基本方法，本文还涉及到html5的应用，这里把实现方法简单介绍。
项目中要用到html5来实现，涉及到Objective-C调用JS，以及JS调用Objective-C的方法，这里把遇到的问题以及实现方法介绍一下。
Objective-C
//
// ViewController.h
// OC_And_JS
//
// Created by 张杰 on 15/7/9.
// Copyright © 2015年 张杰. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIButton *oc_call_js_no_params;
@property (weak, nonatomic) IBOutlet UIButton *oc_call_js_has_params;
@property (weak, nonatomic) IBOutlet UIWebView *mWebView;
@property (weak, nonatomic) IBOutlet UILabel *js_call_oc_show;
- (IBAction)ocCallJsNoParams:(id)sender;
- (IBAction)ocCallJsHasParams:(id)sender;
@end
Objective-C
//
// ViewController.m
// OC_And_JS
//
// Created by 张杰 on 15/7/9.
// Copyright © 2015年 张杰. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
_mWebView.delegate = self;
//打开URL
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
[self.mWebView loadRequest:[NSURLRequest <a href="/tags.php/request/" target="_blank">request</a>WithURL:[NSURL fileURLWithPath: path]]];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *urlstr = request.URL.absoluteString;
NSRange range = [urlstr rangeOfString:@"ios://jwzhangjie"];
if (range.length!=0) {
_js_call_oc_show.text = [NSString stringWithFormat:@"请访问地址：%@", urlstr];
}
return YES;
}
-(void)webView:(nonnull UIWebView *)webView didFailLoadWithError:(nullable NSError *)error{
NSLog(@"加载失败");
}
-(void)webViewDidStartLoad:(nonnull UIWebView *)webView{
NSLog(@"开始加载");
}
-(void)webViewDidFinishLoad:(nonnull UIWebView *)webView{
NSLog(@"开始结束");
// 对于调用js的时候最好这个方法里面或者之后
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)ocCallJsNoParams:(id)sender {
NSString *js = [NSString stringWithFormat:@"ocCallJsNoParamsFunction();"];
[self.mWebView stringByEvaluatingJavaScriptFromString:js];
}
- (IBAction)ocCallJsHasParams:(id)sender {
NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction('%@','%@');",@"jwzhangjie",@"http://jwzhangjie.cn"];
[self.mWebView stringByEvaluatingJavaScriptFromString:js];
}
@end
JavasSctipt
function ocCallJsNoParamsFunction()
{
alert("OC调用JS中的无参方法");
var e = document.getElementById("js_shouw_text");
e.options.add(new Option("OC调用JS中的无参方法", 2));
}
function ocCallJsHasParamsFunction(name, url)
{
alert(name+"的博客地址为："+url);
var e = document.getElementById("js_shouw_text");
e.options.add(new Option("OC调用JS中的有参方法", 2));
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OC与JS互相调用</title>
</head>
<body>
<div >
<<a href="/tags.php/select/" target="_blank">select</a> id="js_shouw_text">
<option>
展示OC调用JS无参数
</option>
</select>
</div>
<div>
<BR/>
<input type="button" value="JS调用OC方法" onclick="js_call_oc()"/>
</div>
<!-- 这里要清楚，虽然test.js跟index.html不同及目录，实际安装到程序里面后，是在同级目录的，所以这里src不能加目录，同样css也是一样的 -->
<script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="test.js" charset="UTF-8"></script>
<script type="text/javascript">
function js_call_oc()
{
var iFrame;
iFrame = document.createElement("<a href="/tags.php/iframe/" target="_blank">iframe</a>");
iFrame.setAttribute("src", "ios://jwzhangjie");
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
</script>
</body>
</html>
规避1：对于OC去调用JS内容最好在webViewDidFinishLoad方法里或者之后
规避2：在html里面引用js或者css的时候src不要带有路径，因为安装后文件都在同级目录下面
规避3：OC调用JS的规范
NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction('%@','%@');",@"jwzhangjie",@"http://jwzhangjie.cn"];
[self.mWebView stringByEvaluatingJavaScriptFromString:js];
规避4：JS调用OC，这里通过html里面发送一个请求，然后在ios中使用shouldStartLoadWithRequest拦截请求，根据请求url的不同进行处理。
javascript
function js_call_oc()
{
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", "ios://jwzhangjie");
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *urlstr = request.URL.absoluteString;
NSRange range = [urlstr rangeOfString:@"ios://jwzhangjie"];
if (range.length!=0) {
_js_call_oc_show.text = [NSString stringWithFormat:@"请访问地址：%@", urlstr];
}
return YES;
}
javascript与Objective-C的相互调用
Objective-C调用Javascript方法：
前提：
UIWebView已经完全加载完成包含需要调用的页面（注：在UIWebViewDelegate托管中通过监视- (void)webViewDidFinishLoad:(UIWebView *)webView调用来确定页面是否加载完成）。
方法：
假设某视图对象的子视图属性self.webview加载的页面包含如下Javascript函数：
function getString(){ return “Hello javascript!”;}
并且该函数在该页面上可被正常调用，则可以通过形如下面的Objectvie-C方法调用此函数：
NSString *str = [self.webview stringByEvaluatingJavaScriptFromString:@"getString();"];
该函数调用实际模拟了页面上的一次Javascript函数调用，因此在该函数内部任何有效的Javascript代码都可被执行！该Objective-C代码返回值为被调用的Javascript代码的返回值，在上例中，str的值将被赋为@”Hello javascript!”。
被调用的函数可以带有字符串或数值型的参数。若调用的Javascript函数名称带有参数，需保证传进去的参数的格式正确性，特别是字符串参数的引号很容易被忽略。
系统响应页面Javascript代码：
前提：
需要实现UIWebViewDelegate的
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType;
托管函数（以下简称跳转监视函数）并将实现了该托管函数的对象设置为UIWebView的delegate。
方法：
UIWebView的当前页面将要被Javascript代码通过以下方式转向的时候，会调用上述跳转监视函数：
window.location.href=”http://www.strongsoft.net”;
此时实现了该托管协议的对象的跳转监视函数会被调用，通过如下代码监视浏览器跳转的地址：
NSString *url = [[request URL] absoluteString];
若该托管函数返回值为NO，则页面UIWebView的页面跳转将被否决。利用这一思路，监视页面上的特定格式的跳转地址加以拦截，并执行相应的本地代码，即可实现Javascript与Objective-C代码的交互。
例如，规定拦截URL地址前缀为”objc:”的所有地址，并且用if…else…语句判定本地需要执行的代码，则实现形如以下格式的Objective-C托管函数：
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType
{
NSString *urlString = [[request URL] absoluteString];
NSArray *urlComps = [urlString componentsSeparatedByString:@":"];
if([urlComps count] && [[urlComps objectAtIndex:o] isEqualToString:@"objc"])
{
NSString *funcStr = [urlComps objectAtIndex:1];
if([funcStr isEqualToString:@"doFunc1"])
{
}
else if([funcStr isEqualToString:@"doFunc2"])
{
}
return NO;
}
return YES;
}
当需要调用本地函数1时，可以通过如下Javascript函数进行：
window.location.href=”objc:doFunc1”;
根据上述思路，可以完善通过Javascript调用本地带参数的Objective-C代码。
