iOS-JS交互 (WebViewJavascriptBridge)

//
//  ViewController.m
//  JSAndIOS交互
//
//  Created by apple on 15/7/31.
//  Copyright (c) 2015年 tqh. All rights reserved.
//

#import "ViewController.h"
#import "WebViewJavascriptBridge.h"
@interface ViewController ()<UIWebViewDelegate>
@property WebViewJavascriptBridge* bridge;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    if (_bridge) { return; }
    
    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    
    [WebViewJavascriptBridge enableLogging];
    
    //网页交互,网页发送消息给程序
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"从JS收到消息: %@", data);
        responseCallback(@"back");
    }];
    //网页交互,网页发送消息给程序
    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"back");
    }];
    [self renderButtons:webView];
    [self loadExamplePage:webView];
}

- (void)renderButtons:(UIWebView*)webView {
    UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:12.0];
    
    UIButton *messageButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [messageButton setTitle:@"发送消息" forState:UIControlStateNormal];
    [messageButton addTarget:self action:@selector(sendMessage:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:messageButton aboveSubview:webView];
    messageButton.frame = CGRectMake(10, 414, 100, 35);
    messageButton.titleLabel.font = font;
    messageButton.backgroundColor = [UIColor colorWithWhite:1 alpha:0.75];
    
    UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [callbackButton setTitle:@"调用处理程序" forState:UIControlStateNormal];
    [callbackButton addTarget:self action:@selector(callHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:callbackButton aboveSubview:webView];
    callbackButton.frame = CGRectMake(110, 414, 100, 35);
    callbackButton.titleLabel.font = font;
    
    UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [reloadButton setTitle:@"重新加载webview" forState:UIControlStateNormal];
    [reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:reloadButton aboveSubview:webView];
    reloadButton.frame = CGRectMake(210, 414, 100, 35);
    reloadButton.titleLabel.font = font;
}

//加载网页
- (void)loadExamplePage:(UIWebView*)webView {
    //ExampleApp加载本地网页
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}

#pragma mark - 事件监听

- (void)sendMessage:(id)sender {
    //发送消息
    [_bridge send:@"oc发送消息" responseCallback:^(id response) {
        NSLog(@"sendMessage got response: %@", response);
    }];
}

- (void)callHandler:(id)sender {
    //发送消息
    id data = @{ @"name": @"value" };
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
    }];
}

#pragma mark - UIWebViewDelegate

- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"webViewDidStartLoad");
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"webViewDidFinishLoad");
}
@end

github下载:https://github.com/marcuswestin/WebViewJavascriptBridge

百度云下载:http://pan.baidu.com/s/1kTnbpTd

js学习:http://www.w3school.com.cn/

http://www.fenesky.com/blog/2014/04/24/how-javascriptcore-works.html

http://www.cnblogs.com/ider/p/introduction-to-ios7-javascriptcore-framework.html

webkit学习:http://blog.csdn.net/column/details/webkit-in-deep.html

时间: 2024-07-29 13:53:48

iOS-JS交互 (WebViewJavascriptBridge)的相关文章

iOS JS 交互之利用系统JSContext实现 JS调用oc方法

ios js 交互分为两块: 1.oc调用js 这一块实现起来比较简单, 我的项目中加载的是本地的html,js,css,需要注意的是当你向工程中拖入这些文件时,选择如下操作,(拖入的文件夹是蓝色的,相对路径),不然css,js 的路径会存在问题 加载本地html: oc调用js:一句代码搞定 2.js 调用oc js调用oc又分为两种: 1.js端是直接调用方法 这里就要说到ios7才推出的一个新的api    JavaScriptCore,首先我们引入这个类,并初始化一个JSContext对

iOS JS交互

1. 添加本地js文件, 并配置head中的属性 function increaseMaxZoomFactor() {        var element = document.createElement('meta');        element.name = "viewport";        element.content = "maximum-scale=5; width=980";        var head = document.getEle

WebViewJavascriptBridge实现js与android和ios原生交互

1.实现原生与js交互     <!-- 申明交互 这段代码固定必须有 --> function setupWebViewJavascriptBridge(callback) {     //android使用     if (window.WebViewJavascriptBridge) {         callback(window.WebViewJavascriptBridge)     } else {         document.addEventListener(     

IOS Webview JS交互之事件拦截获取

最近项目中用到了webvVew,webView加载的网页中有两个按钮,要在app里面响应这两个按钮的点击事件,并接受JS传过来的参数. ios7 的时候,出来了一个新的类库叫JavaScriptCore.framework - (void)setupJsContent { //获取当前JS环境 _content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 打印异

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

今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFromString函数 .现在主要是了解js是如何调用oc方法的,分享下探究过程. 源码不多,就一个头文件WebViewJavascriptBridge.h和实现文件WebViewJavascriptBridge.m, 和一个js文件,实现在js那边可以调用oc方法,也可以在oc里面调用js方法. 先

OC与JS交互之WebViewJavascriptBridge

上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下开源库WebViewJavascriptBridge的实现原理和使用方法,并用此开源库重写之前的示例,同样,本文的示例代码我会在文章后面给出欢迎star 我们在上一篇文章结尾处简要介绍了WebViewJavascriptBridge的实现原理也是基于UIWebView的协议拦截,通过阅读源码发现,中

Ios开发之 -- js和ios的交互

==WebViewJavascriptBridge的介绍== #下载:https://github.com/marcuswestin/WebViewJavascriptBridge #关于WebViewJavascriptBridge的介绍:http://blog.csdn.net/yanghua_kobe/article/details/8209751 ==WebViewJavascriptBridge(在与现有的业务代码结合使用中)的小问题== *demo部分(  ExampleApp.ht

iOS与JS交互

① iOS -> JS 原理:通过WebView的方法直接调用JS代码 [WebView stringByEvaluatingJavaScriptFromString:@"A"]; // 这里的 A 就是WebView中的html所对应的JS代码 eg. 1)这里一个html所包含的js文件内的一个public方法 2)这是一个.m(iOS)文件内的一个WebView的调用1)中js方法的写法 3)那么在js的对应方法中,就会得到来自iOS的参数 ② JS -> iOS 原

iOS web与JS交互

webview 与 JS交互核心代码为: [webView stringByEvaluatingJavaScriptFromString:@"xxxxxxxxxx"];

iOS开发——网络开发OC篇&amp;OC与JS交互简单案例

OC与JS交互简单案例 网页开发中三个重要的知识,这里就不详细介绍了! Html:页面代码 Css:样式 javascript:响应 先来看一段html的简单代码,里面涉及了上面的三个部分(很简单) 1 <html> 2 <!--描述网页信息--> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>hello world</title> 6 <script> 7 f