WebViewJavascriptBridge 进行js 与native通信。

1,  iOS端加载web页面、开启日志并给webView建立JS与OC的桥梁

- (void)viewWillAppear:(BOOL)animated {

if (_bridge) { return; }

// 1.加载网页

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

[self.view addSubview:webView];

// 2.开启日志

[WebViewJavascriptBridge enableLogging];

// 3.webView建立JSOC的沟通桥梁

_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

[_bridge setWebViewDelegate:self];

//JS调用OC通过重定向url并取handlerName来调用,

//注册  js调用OC方法

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

NSLog(@"readID 读身份证 called: %@", data);

responseCallback(@" readID back");

}];

[self renderButtons:webView];

[self loadExamplePage:webView];

}

iOS端注册与前端JS中对应的方法,获得回调,然后我们就可以在回调中做我们需要做的操作。

//OC 调用 js

- (void)callHandler:(id)sender {

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

//OC调用JS通过stringByEvaluatingJavaScriptFromString调用。

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

NSLog(@" 回到OC文件啦---  oc调js  打印回调 testJavascriptHandler responded: %@", response);

}];

}

//js 部分

<script>

window.onerror = function(err) {

log(‘window.onerror: ‘ + err)

}

function setupWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge)

{

return callback(WebViewJavascriptBridge);

}

if (window.WVJBCallbacks)

{

return window.WVJBCallbacks.push(callback);

}

window.WVJBCallbacks = [callback];

var WVJBIframe = document.createElement(‘iframe‘);

WVJBIframe.style.display = ‘none‘;

WVJBIframe.src = ‘https://__bridge_loaded__‘;

document.documentElement.appendChild(WVJBIframe);

setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

}

setupWebViewJavascriptBridge(function(bridge) {

var uniqueId = 1

function log(message, data) {

var log = document.getElementById(‘log‘)

var el = document.createElement(‘div‘)

el.className = ‘logLine‘

el.innerHTML = uniqueId++ + ‘. ‘ + message + ‘:<br/>‘ + JSON.stringify(data)

if (log.children.length) { log.insertBefore(el, log.children[0]) }

else { log.appendChild(el) }

}

//oc调用js

//H5调用 注册本地JS方法,注册后Native可通过JSBridge调用。调用后会将方法注册到本地变量messageHandlers 中

//注册一个供原生调用的api

bridge.registerHandler(‘testJavascriptHandler‘, function(data, responseCallback) {

//log(‘ObjC called testJavascriptHandler with‘, data)

var responseData = { ‘JavascriptSays‘:‘ oc 调js 返回数据 Right back atcha!‘ }

responseCallback(responseData)

})

document.body.appendChild(document.createElement(‘br‘))

var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))

callbackButton.innerHTML = ‘Fire testObjcCallback‘

callbackButton.onclick = function(e) {

e.preventDefault()

log(‘JS calling handler "testObjcCallback"‘)

//js调用oc

//H5调用 调用原生开放的api,调用后实际上还是本地通过url scheme触发。调用时会将回调id存放到本地变量responseCallbacks中

bridge.callHandler(‘readID‘, {‘foo‘: ‘bar‘}, function(response) {

log(‘JS got response‘, response)

})

}

})

</script>

最后在dealloc方法调用清除缓存的方法:

原文地址:https://www.cnblogs.com/iOS-mt/p/10484748.html

时间: 2024-10-15 20:01:46

WebViewJavascriptBridge 进行js 与native通信。的相关文章

WKWebView 里 JS 和 native 通信的例子

native 端 初始化 wkwebview,设置 message handler webView = WKWebView.init() let usecc = self.webView.configuration.userContentController usecc.add(self, name: "testecho") 实现 WKScriptMessageHandler协议 extension ViewController: WKScriptMessageHandler { fu

js与nativede 通信

js与native通信的原理 但在切入正题前,需要先了解下iOS js与native通信的原理.了解这个原理,是理解PhoneGap代码的关键. js –> native 在iOS中,js调用native并没有提供原生的实现,只能通过UIWebView相关的UIWebViewDelegate协议的 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationTy

iOS Js与native相互通信

js与navive相互通信的机制 js –> native 目前,截止至iOS7,iOS原生并没有提供js直接调用native的方式,只能通过UIWebView相关的UIWebViewDelegate协议的 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 方法来

react native js 与 native 的通信与交互方式

JS 的启动过程 React Native 的 iOS 端代码是直接从 Xcode IDE 里启动的.在启动时,首先要对代码进行编译,不出意外,在编译后会弹出一个命令行窗口,这个窗口就是通过 Node.js 启动的 development server . 问题是这个命令行是怎么启动起来的呢?实际上,Xcode 在 Build Phase 的最后一个阶段对此做了配置,其实就是增加了一个 sh 脚本,让小葱的在编译会自动去执行这个脚本,打开 npm,相当于你直接手动命令行切到 react-nati

HTML5,js与Android native通信

概述 何为h5,js与Android通信?其实说白了就是js调用Android本地方法和Android本地调用js方法之间的一个过程.这篇文章主要是讲述一个简单的通信方式,至于通信间数据的协议我用的是jsonRpc,在这里不做过多的描述,不懂的可以自行查阅,因为大多数人通信时不会用这个. webview设置 这个应该不是问题,大概的设置就是一些基本项,这里贴一下代码,没有什么特殊的. private void initWebView() { WebSettings webSettings = w

Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与java互相调用的需求.它就是WebViewJavascriptBridge. 学习动机: 先看下之前的解决办法:Android混合开发之WebView与Javascript交互 最近棒棒安全的一个市场推广来我们公司推广他们的产品,当时也没太引起我的注意,后来这个市场推广人员把我们的app的进行了他们

iOS JS 和 OC交互 / JS 和 native 相互调用

现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native  OC代码 第一种机制 (1)最常用的是 利用 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationT

IOS中js与本地通信手记

如果只有一个webview要想js与ios的本地代码进行通信可以使用现成的phonegap框架,现因项目要求开发ipad版本的应用,页面中有多个需要多个webview所以需要自己编写js代码实现js与本地代码通信. 基本原理是:webview访问特殊的url前缀地址,然后在UIWebViewDelegate的shouldStartLoadWithRequest方法中对url进行过滤就可以达到js与本地代码进行通信了. 1.在MainViewController中实现UIWebViewDelega

js与native的交互

WebView与Javascript交互(Android): WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主: 1.)mainfest.xml中加入网络权限 <uses-permission android:name="android.permission.INTERNET"/> 2.)WebView开启支持JavaScript mWebView.getSetti