UIViewWeb与JS交互(已经放弃)

随着程序的开发，发现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>

上面讲到的UIWebView与js的交互主要是通过拦截js中开始加载的url进行处理来完成js对OC中方法的调用，下面我们说下如何在js中直接调用IOS中的方法。在IOS7.0之后IOS的API中有了JavaScriptCore可以用来完成IOS与web的交互。
首先需要导入头文件：

#import <JavaScriptCore/JavaScriptCore.h>

点开JavaSC
这里在OC中主要要到了两个类：JSContext和JSValue,在-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType,中添加方法js_synchronization并且在block中实现就行了，如果能够确定所穿的参数的个数可以直接给block添加参数用来接收值，如果不确定的话，block可以不传值，可以通过JSContext.currentArguments来获取。

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    JSContext* context =  [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    /*
     *在这里的js_synchronization 是在js中想要调用方法
     */
    /*确定传输参数的个数时，就直接在block中添加就可以了*/
    context[@"js_synchronization"] = ^(JSValue* value1,JSValue* value2){
        NSLog(@"我传递的参数value1 = %@",value1.toString);
        NSLog(@"我传递的参数value2 = %@",value2.toString);
        dispatch_async(dispatch_get_main_queue(), ^{
            self.useNameText.text = value1.toString;
            self.userPassWord.text = value2.toString;
        });
        
        
    };
    //如果不知道参数的个数
    /*context[@"js_synchronization"] = ^(){
        NSArray* array =  JSContext.currentArguments;
        for (int i  =0; i < array.count; i++) {
            JSValue* value = array[i];
            NSLog(@"%@",value.toString);
        }
    };*/
    return  true;
    
}

在JS中直接调用js_synchronization(bbb,aaa);就可以了，具体的代码如下：

<!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>

            <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(){
            js_synchronization("","");
        }
        /*
         * 清空JS数据
         */
        function clear_js(){
            document.getElementById('userName').value = "";
            document.getElementById('passWord').value = "";
        }
        /*
         * 同步js到OC
         */
        function js_synchronization_to_oc(){
            
           var aaa =  document.getElementById('passWord').value;
           var bbb = document.getElementById('userName').value;
           
            js_synchronization(bbb,aaa);
        }
        /*
         * 同步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

最后编辑于：2019.05.28 11:38:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,233评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,013评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,030评论 0赞 241
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,827评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,221评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,542评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,814评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,513评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,225评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,497评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,998评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,342评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,986评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,812评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,560评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,461评论 2赞 266

UIViewWeb与JS交互(已经放弃)

推荐阅读更多精彩内容