MHGJavascriptBridge简介

netScorpion 发布于2019-06-25 14:09 / 2979人阅读

摘要：将这三个文件加入工程中。设置首先，我们需要初始化一个，这通常是在一个中进行的。调用代码方法和上述类似其中第一个参数是函数名。局限性调用时，所有的调用都是异步的，暂时无法实现同步调用。调用时，所传参数受长度限制而限制。

用途

在iOS开发中，我们经常会碰到这样的需求：在UIWebView中的一个链接，点了之后不是进下一个网页，而是进下一个UIViewController，或者让ObjC代码做点事情。这在资讯类的应用中很常见，比如网易新闻、腾讯新闻，以及我们公司的东方财富通中的资讯。

而在旧的iOS版本中，系统不提供在Javascript直接调用ObjC的方法。只能通过变换location等发起网络请求的方式，使得UIWebViewDelegate中的- (BOOL)webView:shouldStartLoadWithRequest:navigationType:感知到，进而做ObjC的处理。

然而这样做比较不优雅，所有的事情都围绕在URL请求上面，而不是方法调用上面，看上去不优雅。MHGJavascriptBridge的用意便是将URL请求等等封装起来，让Javascript和ObjC代码注重于方法调用本身上来。

Github地址：https://github.com/hikui/MHGJavascriptBridge

使用方法

MHGJavascriptBridge由3个文件组成，MHGJavascriptBridge.h, MHGJavascriptBridge.m, MHGJavascriptBridge.js。将这三个文件加入Xcode工程中。注意，MHGJavascriptBridge.js必须加入到资源文件中（在"Building phases" -> "Copy bundle resources"中出现），Xcode默认会将.js文件加入到Compile Sources里面去，这是错误的。

Objective C设置

首先，我们需要初始化一个bridge，这通常是在一个UIViewController中进行的。这里假设在UIViewController中对bridge进行初始化。在初始化中，需要设定bridge的webView属性：

@interface MHGWebViewController ()

@property (nonatomic, strong) MHGJavascriptBridge *bridge;
@property (nonatomic, strong) UIWebView *webView;

@end

...

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        _bridge = [[MHGJavascriptBridge alloc]init];
        _bridge.webView = self.webView;
    }
    return self;
}

在MHGJavascriptBridge中，所有能被Javascript调用的Objective C方法将以block的形式呈现。首先我们需要定义一些blocks，然后对每一个block起名。

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.bridge setBlockName:@"button1OnClick" block:^(NSDictionary *dict) {
        // do stuff
        NSLog(@"button1 on click with params:%@", dict);
    }];
    [self.bridge setBlockName:@"beginSomeTasks" block:^(NSDictionary *dict) {
        // do stuff
        NSLog(@"begin some tasks with params:%@", dict);
    }];
    ...
}

MHGJavascriptBridge的原理是构造特定的URL，并且用UIWebViewDelegate中的- (BOOL)webView:shouldStartLoadWithRequest:navigationType:拦截这个URL。所以在这个delegate方法中，我们需要加入拦截语句：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    BOOL intercepted = [self.bridge interceptRequest:request]; //必须有
    // Do other things ...
    return YES;
}

其中，interceptRequest:方法会返回一个BOOL，如果拦截成功，则返回YES。

这样，Objective C部分就设置完成了。其中需要注意的是，block被调用时，会传入一个dict，这是Javascript部分代码调Objective C代码时所传的参数。

Javascript设置

Javascript部分设置比较简单，最基本的设置是要保证UIWebView中的HTML引入了MHGJavascriptBridge.js：

Javascript调用Objective C代码

一旦设置完成之后，Javascript和Objective C就能互相调用了。代码如下：

var button1ClickEventHandler = function (){
    // Do stuff ...
    MHGJavascriptBridge.callNativeBlock("button1OnClick",{"url":imageURL});
};

这时，点击button1时，就能触发Objective C的代码了。MHGJavascriptBridge.callNativeBlock有两个参数，第一个参数是在Objective C中注册的block名字，第二个参数是传给block里面的dict的额外信息。其中第二个参数必须是一个字典（或者说是一个Javascript Object），或者什么都不传。

Objective C调用Javascript代码

方法和上述类似：

...

[self.bridge callJavascriptFunction:@"setImageWithURL" withParams:@[fileURL.absoluteString]];

...

其中第一个参数是Javascript函数名。如果你在HTML中定义了function xxx(){}或者var xxx = function(){}的话，就能被调用。第二个参数是一个数组，传的是Javascript函数要用的参数列。

局限性

Javascript调用Objective C时，所有的调用都是异步的，暂时无法实现同步调用。

Javascript调用Objective C时，所传参数受URL长度限制而限制。

专线服务私有云 MHGJavascriptBridge 使用简介函数简介基础简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/15596.html

值得收藏！国外最佳互联网安全博客TOP 30

摘要：最近有国外网站对多个互联网安全博客做了相关排名，小编整理其中排名前的安全博客，希望能给大家带来一些帮助。文章更新频率篇周地址简介谷歌在互联网安全的新闻和见解。其安全部分致力于分析最新的恶意软件威胁和漏洞。如果你是网络安全从业人员，其中重要的工作便是了解安全行业的最新资讯以及技术趋势，那么浏览各大安全博客网站或许是信息来源最好的方法之一。最近有国外网站对50多个互联网安全博客做了相关排...

mmy123456 2019-06-21 16:30 评论0 收藏0
Linux - 收藏集 - 掘金

摘要：探索之旅第三部分第五课延时执行，唯慢不破掘金作者谢恩铭转载请注明出处内容简介第三部分第五课延时执行，唯慢不破第三部分第六课预告第三部分测验题延时执行，唯慢不破上一课探索之旅第三部分第四课后台运行及合并多个终端中，我们学习了后台进程以及 Linux 探索之旅 | 第三部分第五课：延时执行，唯慢不破 - 掘金-- 作者谢恩铭转载请注明出处内容简介第三部分第五课：延时执行，唯慢不破 ...

wenzi 2019-05-29 19:35 评论0 收藏0
Linux - 收藏集 - 掘金

摘要：这一课我们来学探索之旅第三部分第一课数据处理，慢条斯理掘金作者谢恩铭转载请注明出处内容简介第三部分第一课数据处理，慢条斯理第三部分第二课预告流管道重定向，三管齐下数据处理，慢条斯理哈哈，终于到了第三部分了。 Linux 基础之常用命令篇 - 后端 - 掘金最近一段时间工作实在是太忙了，所以好久没有写文章了，趁着周末把linux 的相关知识，整理了下。这一篇文件主要记录了一些linux的...

lolomaco 2019-05-29 19:34 评论0 收藏0
Linux

摘要：今天的标题也挺探索之旅第三部分第一课数据处理，慢条斯理作者谢恩铭转载请注明出处内容简介第三部分第一课数据处理，慢条斯理第三部分第二课预告流管道重定向，三管齐下数据处理，慢条斯理哈哈，终于到了第三部分了。 Linux 探索之旅 | 第二部分测试题 -- 作者谢恩铭转载请注明出处内容简介第二部分测试题第三部分第一课预告：数据处理，慢条斯理上一课 Linux 探索之旅 | 第二部...

wwq0327 2019-06-21 15:02 评论0 收藏0
前端技术之_CSS详解第一天

摘要：前端技术之详解第一天一部分略。。。。中国主要城市北京上海广州美国主要城市纽约洛杉矶华盛顿西雅图在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，中的所有元素是一个小区域。前端技术之_CSS详解第一天一html部分略。。。。二、列表列表有3种2.1 无序列表无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。ul就是英语unordered list，无序列表的意...

番茄西红柿 2019-04-23 13:46 评论0 收藏0