iOS和JS交互(含OC、html、js)代码不使用第三方库(二)如果对WebViewJavascriptBridge不

如果对WebViewJavascriptBridge不数据可以看看《iOS和JS交互(含OC、html、js)代码》

直接看代码！！！

今天的实例说明一下: 1：今天说了一个利用JS实现打电话的功能。 2：并且也实现了点击一个button的登陆功能。 3：oc给js传值。

1. 创建index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js/oc互动</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/docment.js"></script>
</head>
<body>
<div id="console">
<br><br><br>
    <input name="value" id="userName">
    <button type="submit" id="Call">打电话</button>
    <br><br>
    <input type="input" name="" id="zhanghao">账号<br>
    <input type="input" name="" id="mima">密码
    <button type="submit" id="AppGoBack">登陆</button>
</div>
</body>
</html>

2. 创建document.js代码

$(document).ready(function() {
    viewDidLoad();
    /**点击打电话*/
    $("#Call").click(function(){
      var numberText = $("#userName").val();
      window.location.href = 'tel://' + numberText;
    });
     /**跳转方法*/
    $("#AppGoBack").click(function(){
      AppTrancelate();
    }); 
});

/发送按钮事件/

function AppTrancelate(){
  var sendData = [$("#zhanghao").val(),$("#mima").val()]
  alert(sendData);
  sendTextStr(sendData);
} 
function viewDidLoad() {
  didViewLoad("js给OC传入传出");
}
function show(str1){
  alert("-----------------str1");
}

我用Jquery写js事件，看官要是不太明白，大概知道一下就可以了。到了这里我的前端的代码已经写完了。下面开始oc代码

3. 创建oc代码

创建一个WebView

@property (nonatomic, strong) UIWebView * webView;

实例化代码

self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.webView];

NSString * loaclStr = @"http://192.168.1.139:3000";
NSURLRequest * quest = [NSURLRequest requestWithURL:[NSURL URLWithString:loaclStr]];
[self.webView loadRequest:quest];
//demo
JSContext * context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

4. js调用电话功能代码实现

首先在js函数是这样写的

/**点击打电话*/
$("#Call").click(function(){
  var numberText = $("#userName").val();
  window.location.href = 'tel://' + numberText;
});
这样写就不用去用JS调用oc代码去打电话了，我们直接用js调用连接打电话了。

5. js调用登陆功能代码实现

看看JS端函数

 /**登陆*/
$("#AppGoBack").click(function(){
  AppTrancelate();
});

看OC端代码实现

/**js调用oc*/
context[@"sendTextStr"] = ^(){
    NSLog(@"js调用");
    NSArray *args = [JSContext currentArguments];
    for (JSValue *jsVal in args) {
    NSLog(@"%@", jsVal);
    }
};

NOTICE:这里要注意，登陆按钮执行的单击事件里的函数，我们要执行函数中的SendeData的函数，这里就是sendTextStr

js调用OC代码然后oc代码给js传值代码实现

这里的js代码如下

function viewDidLoad() {
  didViewLoad("js给OC传入传出");
}

要在ready（）的函数里要执行该函数。 oc里的代码

context[@"didViewLoad"] = ^(){
    NSLog(@"js调用--ViewdidLoad");
    NSArray *args = [JSContext currentArguments];
    for (JSValue *jsVal in args) {
        NSLog(@"%@", jsVal);
    }
    /**接受完传值之后，oc给js传入函数值，带参数的*/
    NSString * func = [NSString stringWithFormat:@"show('%@');",@"OC后台传入数据"];
    [self.webView stringByEvaluatingJavaScriptFromString:func];
};