使用WebViewJavascriptBridge与UIWebView交互
使用WebViewJavascriptBridge与UIWebView交互
https://github.com/marcuswestin/WebViewJavascriptBridge
核心的地方:
UIWebView在加载完网页之后,通过方法stringByEvaluatingJavaScriptFromString:来让这个webView执行js脚本,之后想干啥干啥.
注意:必须是加载完之后!
使用
下载源码拖入工程.
使用一个本地的html文件.
<!doctype html>
<html><head>
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head><body>
<h1>WebViewJavascriptBridge Demo</h1> <!--脚本开始的地方-->
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
} <!--申明方法-->
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
} <!--激活方法-->
connectWebViewJavascriptBridge(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 + (data ? ':<br/>' + JSON.stringify(data) : '')
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}
bridge.init(function(message, responseCallback) {
log('JS got a message', message)
var data = { 'Javascript Responds':'Wee!' }
log('JS responding with', data)
responseCallback(data)
}) bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
}) <!--创建一个按钮-->
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = 'Send message to ObjC'
button.onclick = function(e) {
e.preventDefault() <!--此处是你传参数的地方-->
var data = 'YouXianMing'
log('JS sending message', data)
bridge.send(data, function(responseData) {
log('JS got response', responseData)
})
} document.body.appendChild(document.createElement('br'))
}) <!--脚本结束的地方-->
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>
RootViewController代码如下:
//
// RootViewController.m
// WebViewJavascriptBridge
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "WebViewJavascriptBridge.h" @interface RootViewController ()<UIWebViewDelegate> @property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge; @end #define BUNDLE_FILE(fileName) [[NSBundle mainBundle] pathForResource:fileName ofType:nil];
#define HTML_STRING(htmlPath) [NSString stringWithContentsOfFile:htmlPath \
encoding:NSUTF8StringEncoding error:nil]
#define FILE_URL(path) [NSURL fileURLWithPath:path] @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad]; // 获取本地html文件
NSString *htmlPath = BUNDLE_FILE(@"demo.html"); // 初始化UIWebView并添加进view中
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[_webView loadHTMLString:HTML_STRING(htmlPath)
baseURL:FILE_URL(htmlPath)];
[self.view addSubview:_webView]; // 让UIWebView执行脚本并监听回调
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView handler:^(id data, WVJBResponseCallback responseCallback) { // 监听回调
NSLog(@"%@", data);
}];
} @end
执行效果如下:
分析
WebViewJavascriptBridge.m 的源码里面有写着让webView执行js脚本的地方哦.
其实,我们只需要能够从UIWebView获取到值就行了,我们才不需要把值传递给UIwebView呢,有了这个UIWebView给iOS传值的功能,基本上能满足我们大部分的需求了哦.
最后,我将html页面进行修改,精简到大家能看懂为止:).
demo.html
<!doctype html>
<html><head>
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head><body>
<h1>UIWebView与iOS直接交互</h1> <!--脚本开始的地方-->
<script> <!--申明方法-->
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
} <!--激活方法-->
connectWebViewJavascriptBridge(function(bridge) { <!--创建一个按钮-->
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = '给iOS发送信息' <!--按钮点击事件的实现-->
button.onclick = function(e) {
e.preventDefault() <!--此处是你传参数的地方-->
var data = 'YouXianMing - Just so easy :)' <!--使用bridge中的send发送数据-->
bridge.send(data, function(responseData) {
})
} document.body.appendChild(document.createElement('br'))
}) <!--脚本结束的地方-->
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>
以下是修改后的执行效果:
附录:
WebViewJavascriptBridge与UIWebView交互原理
使用WebViewJavascriptBridge与UIWebView交互的更多相关文章
- 利用WebViewJavascriptBridge与UIWebView进行交互
事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...
- UIWebview交互之自己定义传值跳转
UIWebview常常会用到和原生页面的跳转.有的可能还须要传值跳转.自己写了一个自己定义跳转的webview,能够跳转到指定控制器并传值,这须要和后台协商好.html中怎样传值跳转,即:html中的 ...
- iOS-JS交互 (WebViewJavascriptBridge)
, , , ); messageButton.titleLabel.font = font; messageButton.backgroundColor = [UIColor colo ...
- UIWebView与JS的深度交互
我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...
- UIWebView与JS的深度交互-b
要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > ...
- iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...
- OC与JS交互之UIWebView
随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...
- iOS中html5的交互：WebViewJavascriptBridge
https://github.com/marcuswestin/WebViewJavascriptBridge Setup & Examples (iOS & OSX) Start w ...
- [转]OC与JS的交互详解
事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...
随机推荐
- 全局描述符表（GDT）——《x86汇编语言：从实模式到保护模式》读书笔记09
在进入保护模式之前,我们先要学习一些基础知识.今天我们看一下全局描述符表(Global Descriptor Table, 简称GDT). 同实模式一样,在保护模式下,对内存的访问仍然使用段地址加偏移 ...
- JVM笔记6-垃圾回收器
JVM进行垃圾回收时要考虑哪的问题如下: 1.如何判定对象为垃圾对象? 1.引用计数法:在对象中添加一个引用计数器,当有地方引用这个对象的时候,引用计数器的值就+1,引用失效的时候,计数器的值就-1, ...
- Linux时间命令
Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法: ...
- CSS的定位问题总结
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许 ...
- Sharepoint Timer job问题汇总
解决方案发布最好发布到GAC中,使用WebApplication很多时候会有问题.TimerJob并非是在IIS下运行,所以发布到wss目录下的dll不能使用. 如果解决方案中只有一个Timer Jo ...
- C# 开发者审查代码的41条建议
1. 确保没有任何警告(warnings). 2.如果先执行Code Analysis(启用所有Microsoft Rules)再消除所有警告就更好了. 3. 去掉所有没有用到的usings.编码过程 ...
- rabbitmq-channel方法介绍
先介绍rabbmitmq的几个方法: // 声明一个队列 -// queue 队列名称 // durable 为true时server重启队列不会消失 (是否持久化) // exclusive 队列是 ...
- Microsoft .NET Pet Shop 4: Migrating an ASP.NET 1.1 Application to 2.0
249 out of 297 rated this helpful - Rate this topic Gregory Leake Microsoft Corporation Alan Le, Ale ...
- pycharm配置环境
- bzoj P4870: [Shoi2017]组合数问题——solution
题意:求解—— $$(C^{r}_{nk}+C^{r+k}_{nk}+C^{r+2k}_{nk}+...+C^{r+(n-1)k}_{nk}+...)mod(P)$$ 其中$C^{m}_{n}$表示从 ...