OC-JS交互(WebViewJavascriptBridge使用说明)

首先确保一份已经配好功能的html文件。

1.初始化一个webview(viewdidload)

UIWebView* webView = [[UIWebView alloc]
initWithFrame:self.view.bounds];

[self.view addSubview:webView];

2.将此webview与WebViewJavascriptBridge关联(viewdidload)

if (_bridge) { return; }

[WebViewJavascriptBridgeenableLogging];

_bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {

}]; ps:此时你的webview就与js搭上桥了。下面就是方法的互调和参数的互传。

(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

[_bridge registerHandler:@"testObjcCallback"handler:^(id data, WVJBResponseCallback responseCallback) {

NSLog(@"testObjcCallbackcalled:
%@", data);

responseCallback(@"Response fromtestObjcCallback");

}];

这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

(2)oc调js方法(通过data可以传值,通过
response可以接受js那边的返回值)

id data = @{ @"greetingFromObjC":
@"Hi there,JS!" };

[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {

NSLog(@"testJavascriptHandlerresponded:
%@", response);

}];

注意这里的 testJavascriptHandler也是个方法标示。

(3)oc给js传值(通过
response接受返回值)

[_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) {

NSLog(@"sendMessage gotresponse:
%@", response);

}];

(4)oc给js传值(无返回值)

[_bridge send:@"A string sentfrom ObjC after Webview has loaded."];

在WebViewJavascriptBridge这个第三方中有个

WebViewJavascriptBridge.js.text 中有这个段代码

其中  callMotion: callMotion 就是和HTML
所约定的类名,JS端的类名和这个必须统一

时间: 2024-11-05 03:42:52

OC-JS交互(WebViewJavascriptBridge使用说明)的相关文章

OC js 交互

React Native是Facebook刚开源的框架,可以JavaScript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC). 概览 React Native用iOS自带的JavaScriptCore作为JS的解析引擎,但并没有用到JavaScriptCore提供的一些可以让JS与OC互调的特性,而是自己实现了一套机制,这套机制可

OC JS交互(通常情况下,如果网页写得正规的话,是可以正常交互的,之前就遇到后台写h5始终拿不到事件,元素也拿不到,更别说交互了,真是奇了怪了)

自动填充表单 @"document.getElementById('loginid').value = '这里填入你的用户名';document.getElementById('userpassword').value = '这里填入你的密码';"; 根据ID拿到输入用户名的输入框并给值 根据ID拿到输入密码的输入框并给值 自动点击登录按钮 @"document.getElementById('login').click()" 根据ID获取登录按钮这个元素,并调用其

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与OC交互(JavaScriptCore) OC ----->JS

目标 本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法 网页js调用APP中的OC方法 JavaSciptCore.framework框架介绍 JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境.具体介绍请看这篇简书的文章:JavaScriptCore 使用 准备环境 创建一个名为JS与OC交互Demo的iOS工程.然后在storyboard添

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开发——网络开发OC篇&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

oc与js交互-----WKWebView

这些天研究了一些oc与js交互的问题,纯属个人理解 oc与js交互是跨平台iOS与javaScript的通信.公司为了开发节约成本,本来安卓,与iOS两个版本的app开发,利用js通过webView的加载只需要做一些交互工作就使得javaScript书写的页面可以同时在安卓与iOS上使用可谓一举两得. WKWebView里边的方法 1.OC中调用js方法(我认为是oc向js中传值) 使用的是 <span style="background-color: rgb(255, 255, 255)

js(javascript)与OC(Objective-C)交互

实质上oc与js的通信交互就是发送消息,也即函数调用,iOS7以后官方公布JavaScriptCore framework中很方便我们对他们之间的相互调用.在以前我们只能通过UIWebView的UIWebViewDelegate协议来实现. 1 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType

Mac Webview OC与JS交互实现

1.首先,需要定义一个JS可识别的变量(如external)用于OC与JS交互 - (void)webView:(WebView *)sender didClearWindowObject:(WebScriptObject *)windowObject forFrame:(WebFrame *)frame { [self.windowScriptObject setValue:self forKey:@"external"]; } 2.JS调用OC代码 第一步.在OC中声明对JS开放的