oc 和 h5中js 的交互

来源：互联网发布：数据库应用系统饭店编辑：程序博客网时间：2024/06/10 01:32

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

[objc] view plain copy
//  
//  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  

[objc] view plain copy
//  
//  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  

[javascript] view plain copy
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] view plain copy
<!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方法" onclick="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的规范

[objc] view plain copy
NSString *js = [NSString stringWithFormat:@"ocCallJsHasParamsFunction('%@','%@');",@"jwzhangjie",@"http://jwzhangjie.cn"];  
   [self.mWebView stringByEvaluatingJavaScriptFromString:js];  

规避4：JS调用OC，这里通过html里面发送一个请求，然后在ios中使用shouldStartLoadWithRequest拦截请求，根据请求url的不同进行处理。

[javascript] view plain copy
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;  
       }  

[objc] view plain copy
- (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

0 0