使用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 = 1function 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交互相关推荐

  1. iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  2. UIWebView与JS的深度交互

    事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...

  3. iOS WebviewJavascriptBridge 源码研读笔记

    这两天接近元旦,事情稍微少些,有些时间,索性写点什么,就从最擅长的iOS混合开发写起了,由于iOS开发经验不到四年吧,期间还搞了一年半的前端,有些知识可能还是积累的不足,能力不足,水平有限,可能有谬误 ...

  4. iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge

    2019独角兽企业重金招聘Python工程师标准>>> iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 ht ...

  5. [转]OC与JS的交互详解

    事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...

  6. iOS开源项目MobileProject功能点介绍

    一:MobileProject简介 MobileProject项目是一个以MVC模式搭建的开源功能集合,基于Objective-C上面进行编写,意在解决新项目对于常见功能模块的重复开发,MobileP ...

  7. iOS 开发常用三方类库

    1. IQKeyboardManager IQKeyboardManager是iOS中解决键盘弹起遮挡UITextField/UITextView的一种很实用的工具.无需输入任何代码,不需要额外的设置 ...

  8. UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

    一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...

  9. (0006) iOS 开发之JavaScriptCore 实现UIWebView和HTML的交互

    阅读说明:本文不讲解JavaScriptCore 基本使用.网上博客比较多,看几篇基本都会使用了.这里只针对使用过程中遇到的一些问题.以便更好的使用JavaScriptCore. 由于开发的项目是电商 ...

最新文章

  1. 执子之手，与子偕老。你同意么?
  2. php数组添加省会城市,【JSON数据】中国各省份省会城市经纬度 JSON
  3. java asynchronize_Java 中synchronize函数的实例详解
  4. STM32之RCC原理
  5. Kali Linux 网络扫描秘籍 第三章 端口扫描（一）
  6. android学习笔记---46视频刻录的实现，视频录像器。
  7. Bootstrap(5)栅格系统
  8. python验证码识别——前处理
  9. 机器视觉技术概述-技术难点-市场前景
  10. 微信小程序商城项目实战(第三篇:商品列表)
  11. mac-数据库建模工具Workbench、PDMan
  12. ES slop问题纪录
  13. ArcGisPro脚本工具【7】——通过高德地图API获取公交线路
  14. Maven(自动化构建工具)
  15. 算法利用：人机交互面临的道德漏洞
  16. HDMI接口与HDMI协议
  17. 设计模式 - 六大设计原则之LoD（迪米特法则原则）
  18. python爬虫代理服务器_Python爬虫之服务器：代理IP万能
  19. 求平行四边形的面积。
  20. 餐厅无线AP覆盖具有哪些特点

热门文章

  1. ArchLinux安装简单安装教程
  2. C#中WinForm 父窗体和子窗体传值
  3. 封装的ini文件类。保存为unicode的。解决delphi xe的TiniFile保存后不为unicode的问题...
  4. 【动态规划】LeetCode 62. Unique Paths
  5. 程序员面试金典——18.9实时中位数
  6. 剑指offer——面试题21：包含min函数的栈
  7. Leetcode 392.判断子序列
  8. 验证二叉树后序遍历序列是否符合要求
  9. 数据通路习题分析之二
  10. 并查集算法学习（转）