随着程序的开发，发现IOS中使用OC和js的交互越越多，这里就先做以下对简单的OC与JS交互，进行总结。总体效果如下：
oc_js_07.gif
这里对对ios中OC与JS简单的交互进行介绍，以及实现。程序中简单的实现了js与OC部分的信息的交互。
1、从OC控制js中的代码调用的是stringByEvaluatingJavaScriptFromString实现具体代码如下
#pragma mark 调用js中的方法实现OC同步到js
- (IBAction)synchronizationJS:(id)sender {
NSString* js = [NSString stringWithFormat:@"oc_synchronization_to_js('%@','%@')",self.useNameText.text,self.userPassWord.text];
[self.webView stringByEvaluatingJavaScriptFromString:js];
}
#pragma mark 调用js的方法实现OC清空js
- (IBAction)clearJs:(id)sender {
NSString *js = [NSString stringWithFormat:@"clear_js();"];
[self.webView stringByEvaluatingJavaScriptFromString:js];
}
2、通过QWebView的代理中的方法-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；来实现js对oc的控制
具体代码如下：
#pragma mark 用于js调用清空OC的接口
-(void) clearOC
{
self.userPassWord.text = @"";
self.useNameText.text = @"";
}
#pragma mark 用于设置js同步到OC的接口
-(void) setName:(NSString*) name withPassWord:(NSString*) password
{
self.useNameText.text = name;
self.userPassWord.text = password;
}
#pragma mark webview的代理 这里只需要处理start
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString* urlStr = request.URL.absoluteString;
//对数据的进行处理
//[urlStr ]
//[urlStr rangeOfString:@"ios://clearOC"];
if([urlStr hasPrefix:@"youling0809://clearOC"])
{
[self clearOC];
return NO;
}
else if([urlStr hasPrefix:@"youling0809://js_synchronization_to_oc"])
{
NSString* urlstrTemp = [[NSMutableString alloc] initWithFormat:urlStr,nil];
urlstrTemp = [urlstrTemp stringByReplacingOccurrencesOfString:@"youling0809://js_synchronization_to_oc" withString:@""];
NSArray* array = [urlstrTemp componentsSeparatedByString:@"__________"];
[self setName:array[0] withPassWord:array[1]];
return NO;
}
return YES;
}
3、当然只有这些是不够的还需要js界面的配合以下，js的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>幽灵OC和js的交互</title>
</head>
<body>
<center>
<span>js部分</span>
</center>
<center>
<span>用户名：</span>
<input type="text" id="userName" name="userName" width="150px"/>
</center>
<center>
<span>密 码：</span>
<input type="text" id="passWord" name="passWord" width="150px" />
</center>
<center>
<span> </span>
<input type="button" id="synchronization_to_oc" value="js数据同步到OC" width="60px" height="24px" onclick="js_synchronization_to_oc()"/>
</center>
<center>
<span> </span>
<input type="button" name="clearOC" id="clearOC" value="清空OC数据" width="60px" height="24px" onclick="js_clear_oc()"/>
</center>
<script type="text/javascript">
/*
* 清空oc数据
*/
function js_clear_oc(){
//alert(1234);
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", "youling0809://clearOC");
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;
}
/*
* 清空JS数据
*/
function clear_js(){
document.getElementById('userName').value = "";
document.getElementById('passWord').value = "";
}
/*
* 同步js到OC
*/
function js_synchronization_to_oc(){
//alert(1234);
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", "youling0809://js_synchronization_to_oc"+document.getElementById('userName').value+"__________"+document.getElementById('passWord').value);
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;
}
/*
* 同步OC到JS
*/
function oc_synchronization_to_js(name,password01){
document.getElementById('userName').value = name;
document.getElementById('passWord').value = password01;
//alert(123);
}
</script>
</body>
</html>
Demo的下载地址为：https://github.com/IOSYUNYUN/oc_js_01.git
网友评论