近期项目中要用到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方法" 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的规范

 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

OC与JS互相调用的更多相关文章

  1. OC 与js 互相调用

    参考文章 iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 参考文章 http://www.jianshu.com/p/fd378c6d70c0 利用苹果原生的JavaScriptC ...

  2. WebViewJavascriptBridge源码探究--看OC和JS交互过程

    今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...

  3. JS代码和OC代码的相互调用

    JS调用OC 很多应用里面或多或少的调用了网页,来达到绚丽的效果,所谓的JS调用OC.....举个例子吧,网页上有个按钮 点击按钮跳转界面,跳转的动作由OC的代码实现. OC调用JS 还是举个例子,我 ...

  4. UIWebView中Html中用JS调用OC方法及OC执行JS代码

    HTML代码: <html> <head> <title>HTML中用JS调用OC方法</title> <meta http-equiv=&quo ...

  5. JS与OC交互，JS中调用OC方法(获取JSContext的方式)

    最近用到JS和OC原生方法调用的问题,查了许多资料都语焉不详,自己记录一下吧,如果有误欢迎联系我指出. JS中调用OC方法有三种方式: 1.通过获取JSContext的方式直接调用OC方法 2.通过继 ...

  6. [转]OC与JS的交互详解

    事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...

  7. OC与JS的交互

    现在APP的开发已经不局限于原生开发,很多都是原生+html5这种混合开发 我们可以通过webView这个控件,实现混合开发. 1.首先你需要创建一个html页面 <html> <h ...

  8. 通过WebViewJavascriptBridge实现OC与JS交互

      在.m方法当中,申明一个WebViewJavascriptBridge属性: @interface ExampleAppViewController () @property WebViewJav ...

  9. OC和JS之间的交互

    OC和JS之间的交互 目录 对OC和JS之间交互的理解 JS调用OC OC调用JS 对OC和JS之间交互的理解 JS调用OC JS文件 function sendCommand(cmd,param){ ...

随机推荐

  1. mongodb一些特性

    mongodb 地理位置 mongodb schema mongodb 定时任务 mysql 也有定时任务 mongodb 读写分离 http://blog.csdn.net/sd0902/artic ...

  2. MySQL性能调优与架构设计读书笔记

    可扩展性设计之数据切分 14.2 数据的垂直切分 如何切分,切分到什么样的程度,是一个比较考验人的难题.只能在实际的应用场景中通过平衡各方面的成本和利益,才能分析出一个真正适合自己的拆分方案. 14. ...

  3. Sqlserver数据库日志太大如何快速删除

    sqlserver使用在windows系统中,如果文件超上百GB了,我们还直接删除不了,这个问题我以前的apache日志就碰到过,至今还没删除呢,那么Sqlserver数据库日志太大如何快速删除呢,有 ...

  4. csms发布步骤

    1.wcf发布 通过点击 CSMS2.Application,右键发布按钮,将文件拷贝 2.打包文件 CSMS2.Resources 中 update.config 修改为对应 ServerUrl地址 ...

  5. mysql死锁--源于外键关联

    死锁 存在于行级锁 存在的条件 1.资源只能同时被一个线程占有 2.资源占有不能被强制剥夺 3.请求和保持占有(在请求占有资源的同时能保持现有资源的占有) 4.死循环(一般做程序的人最关注的点) 一到 ...

  6. Mysql 视图笔记

    1.       视图的定义 视图就是从一个或多个表中,导出来的表,是一个虚拟存在的表.视图就像一个窗口(数据展示的窗口),通过这个窗口,可以看到系统专门提供的数据(也可以查看到数据表的全部数据),使 ...

  7. An FPS counter.

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/Unity_FPFCounter.html using UnityEngine; u ...

  8. 单电机板机模型,f22

    视频连接 http://v.youku.com/v_show/id_XMTI5MDEzMzIxMg==.html?from=y1.7-1.2 http://v.youku.com/v_show/id_ ...

  9. javascript sort()与reverse()

    javascript 中提供了两个对数据进行排序的方法,即sort()和reverse() 在理解的时候犯了一个非常低级的错误,现记录如下: reverse()不包括排序的功能,只是把原来的数组反转. ...

  10. div+css的叫法是不正确的

    为什么国人将这种布局标准页面的方法叫做DIV+CSS? 因为第一个将这种技术引进中国的人,对这门技术理解不够透彻,单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法,认为过去布局页面用的是Ta ...