OC与JS互相调用

最近项目中要用到html5来实现,涉及到OC调用JS,以及JS调用OC的方法,这里把遇到的问题以及实现方法介绍一下。


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


//
//  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 requestWithURL:[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

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));
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>OC与JS互相调用</title>
</head>
<body>
    <div >
        <select id="js_shouw_text">
            <option>
                展示OC调用JS无参数
            </option>
        </select>
    </div>
    <div>
        <BR/>
        <input type="button" value="JS调用OC方法" οnclick="js_call_oc()"/>
    </div>
    <!--  这里要清楚,虽然test.js跟index.html不同及目录,实际安装到程序里面后,是在同级目录的,所以这里src不能加目录,同样css也是一样的  -->
    <script type="text/javascript" src="test.js" charset="UTF-8"></script>
    <script type="text/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;
        }
        
    </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的不同进行处理。

 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;
}

源码地址:

http://jwzhangjie.cn/forum.php?mod=viewthread&tid=3&page=1&extra=#pid3


  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值