iOS iOS与html进行交互
实现的
效果就是上边那样：首先通过webview 进行网络请求 然后进行显示。
然后点击下一页的按钮 通过js的响应显示另一个网页
最后通过下一页的按钮可以返回到首页。
本文仅仅是h5跟ios 的交互的入门 所以没有做细致的描述。
首先先说一下思路：我的项目中是那样的：首先h5从后台拿到数据，然后我请求h5的界面，然后通过h5的按钮进行选择，通过ios控制按钮到那个界面。
这个小demo不涉及数据传输，只是界面的交互。
1 我自己写了两个小网页。
代码如下
首页的indexPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="next()">nextPage(下一页)</button>
</body>
<script>
alert("123");
function next(){
WOSS.goForward("下一页","http://127.0.0.1:8020/HelloHBuilder/index2.html");
}
</script>
</html>
第二个界面的html index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<br />
<label>这是第二个网页，欢迎你跳转成功了</label>
<button onclick="returnFirst()">返回首页</button>
</head>
<body>
</body>
<script>
function returnFirst(){
WOSS.goHome("返回","http://127.0.0.1:8020/HelloHBuilder/index1.html#");
}
</script>
</html>
2 进行ios代码的编写
（1）创建Navigation.h
#import <UIKit/UIKit.h> @interface LSNavigation : UINavigationController @end
Navigation.m
#import "LSNavigation.h" @implementation LSNavigation @end
(2)appDelegate的设置
appDelegate.h
#import <UIKit/UIKit.h>
#import "LSNavigation.h"
@interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) LSNavigation *baseNavigationController;
@end
appdelagete.m
#import "AppDelegate.h"
#import "LSNavigation.h"
#import "LSWebVC.h"
@interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.baseNavigationController = [[LSNavigation alloc] init];
self.window.rootViewController = self.baseNavigationController;
LSWebVC *vc = [[LSWebVC alloc]init];
[self.baseNavigationController pushViewController:vc animated:YES];
return YES;
}
(3)创建：LSwebViewVC用来显示加载webView
webVIewVC.h
#import <UIKit/UIKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface LSWebVC : UIViewController
@property (nonatomic,strong) UIWebView *webView;
//@property (nonatomic,assign) BOOL needRefresh;
@property (nonatomic,copy) NSString *webTitle;
@property (nonatomic,copy) NSString *webUrl;
@end
webViewVC.m
#import "LSWebVC.h"
#import "LSInterActive.h"
@interface LSWebVC()<UIWebViewDelegate>
@property (nonatomic,strong) JSContext *context; @end
@implementation LSWebVC
-(void)viewDidLoad
{
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0,([UIScreen mainScreen].bounds.size.width ) , ([UIScreen mainScreen].bounds.size.height))];
self.view.backgroundColor = [UIColor yellowColor]; self.title = self.webTitle; self.webView.delegate = self;
[self.view addSubview:self.webView];
if(!self.webUrl)
{
self.webUrl=@"http://127.0.0.1:8020/HelloHBuilder/indexPage.html"; }else{ self.webUrl = [self.webUrl stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
}
NSURL *url = [NSURL URLWithString:self.webUrl];
NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:20];
[self.webView loadRequest:request];
}
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.context.exceptionHandler = ^(JSContext *con, JSValue *exception) {
NSLog(@"exception==========================================================:%@", exception);
con.exception = exception;
};
//设置对象别名 LSInterActive *interactive = [[LSInterActive alloc] init];
self.context[@"WOSS"] = interactive; }
@end
（4）创建进行点击交互的类（用于存放一些点击事件交互用）
LSINterActive.h
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol FCInteractiveProtocol <JSExport>
//1.1前进 //goForward(title,forwardUrl)
- (void)go:(NSString *)title forward:(NSString *)url; - (void)go:(NSString *)title home:(NSString *)url;
@end @interface LSInterActive : NSObject<FCInteractiveProtocol> @end
LSInterActive.m
#import "LSInterActive.h"
#import "LSWebVC.h"
#import "LSNavigation.h"
#import "AppDelegate.h" @implementation LSInterActive //下一页
-(void)go:(NSString *)title forward:(NSString *)url
{
NSLog(@"FCInteractive-------goForward:%@,%@",title,url); //当前是异步线程
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *delegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
LSNavigation *navi = delegate.baseNavigationController;
LSWebVC *nextVc = [[LSWebVC alloc] init];
nextVc.webTitle = title;
nextVc.webUrl = url;
[navi pushViewController:nextVc animated:YES];
});
} //返回主页
- (void)go:(NSString *)title home:(NSString *)url{
NSLog(@"FCInteractive-------goHome:%@,%@",title,url);
//当前是异步线程
dispatch_async(dispatch_get_main_queue(), ^{
AppDelegate *delegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
LSNavigation *navi = delegate.baseNavigationController; UIViewController *vc = navi.viewControllers[0];
if ([vc isKindOfClass:[LSWebVC class]]) {
LSWebVC *firstVc = (LSWebVC *)vc;
// firstVc.needRefresh = YES;
}
[navi popToRootViewControllerAnimated:YES];
});
} @end
这样的话就可以了。简单的实现了交互。如有不足，欢迎指出 本人邮箱673658917@qq.com
------------------------补充分界线-------------------------------------------------------------------------
最近又在看oc与h5交互，所以又补充一点，就是 例如你在原生的界面登录成功之后怎么给html界面把值传过去？
我这边采用的方式是：通知传值的方式
思路: 在webviewVC的界面初始化的时候就要把通知加上 然后 登录成功之后 发送通知 将值传给h5
//添加一个通知 等着需要传值给html的时候就用这个通知
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(receiveNoti:) name:@"sendMyUserID" object:nil];
通知方法实现
//利用通知的方法 给h5传值
- (void)receiveNoti:(NSNotification*)noti{
NSString *jsString = [NSString stringWithFormat:@"sendUserPhone(\"%@\")",@""];
// NSLog(@"登录成功js-------%@",jsString);
[self.context evaluateScript:jsString];
}
发送通知
-(void)btnClicked:(UIButton*)sender{
[[NSNotificationCenter defaultCenter]postNotificationName:@"sendMyUserID" object:nil];
}
这样的话就可以了哦，oc跟h5 相互船传值就是这么简单。
想要demo的加我 qq 673658917@qq.com
---------------------------------------------------------------------------------------------------------------------------------------------------------------------以上是第一种方法，也是利用原生的 uiwebview进行实现的，步骤简单，我现在项目中使用的方法就是方法1. 但是ios8之后 苹果推出了 wkWebview 比uiwebview 占用内存更小，运行速度更快，现在献上 wkwebview的使用方法，供大家参考。---------------------------------------------------------------------------------------
以前的时候并没有深入研究过webview，最近正好失恋了，就研究一下吧。
以前的时候一直在用uiwebview 老是感觉占很多的内存，但是没有时间处理，所以就一直拖着。
最近发现了wkwebview 这个是ios8之后出来的，就在#import <WebKit/WebKit.h>这个类里边就包含了这个wkwebview这个类，wkwebview继承于uiview 特点：占用内存更少了，速度更快了。
看一下wkwebview的特性：
1.性能 稳定性 功能方面有很大的提高（最直观的就是体现在占用的内存上边）。
2.允许js的Nitro库加载并使用(uivieqview中限制)
3.支持更多的html5特性
4.高达60fps的滚动刷新频率以及内置手势
5.将uiviewviewdelegate与uiwenview重构成了14个类和3个协议 （查看苹果官方文档https://developer.apple.com/reference/webkit）
下边开始讲使用了哦
准备工作：
1.设置oc代码
2.设置html代码
3.运行
oc代码：
//
// ViewController.m
// OC与JS交互之WKWebView
//
// Created by user on 16/8/18.
// Copyright © 2016年 rrcc. All rights reserved.
// #import "ViewController.h"
#import <WebKit/WebKit.h> @interface ViewController () <WKScriptMessageHandler> @property (nonatomic, strong) WKWebView *wkWebView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; //1.
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.minimumFontSize = ; //2.
self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(, , self.view.bounds.size.width, self.view.bounds.size.height/) configuration:config];
[self.view addSubview:self.wkWebView]; //3.
// NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
// NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
// [self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
NSURL *url = [[NSURL alloc]initWithString:@"http://127.0.0.1:8020/h5AndOCTest/myIndex.html"];
NSURLRequest *request = [[NSURLRequest alloc]initWithURL:url];
[self.wkWebView loadRequest:request]; //4.
WKUserContentController *userCC = config.userContentController;
//JS调用OC 添加处理脚本
[userCC addScriptMessageHandler:self name:@"showMobile"];
[userCC addScriptMessageHandler:self name:@"showName"];
[userCC addScriptMessageHandler:self name:@"showSendMsg"]; } //网页加载完成之后调用JS代码才会执行，因为这个时候html页面已经注入到webView中并且可以响应到对应方法
//oc调用h5，通过按钮的点击事件进行响应
- (IBAction)btnClick:(UIButton *)sender {
if (!self.wkWebView.loading) {
if (sender.tag == ) {//电话
[self.wkWebView evaluateJavaScript:@"alertMobile()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
//TODO
NSLog(@"%@ %@",response,error);
}];
} if (sender.tag == ) {//名字 [self.wkWebView evaluateJavaScript:@"alertName('小红')" completionHandler:nil];
} if (sender.tag == ) {//信息
[self.wkWebView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil];
} } else {
NSLog(@"the view is currently loading content");
}
} #pragma mark - WKScriptMessageHandler
//h5调用oc 根据h5那边传递过来的数据进行响应的弹框显示
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"%@",NSStringFromSelector(_cmd));
NSLog(@"%@",message.body); if ([message.name isEqualToString:@"showMobile"]) {
[self showMsg:@"我是下面的小红 手机号是:18870707070"];
} if ([message.name isEqualToString:@"showName"]) {
NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body];
[self showMsg:info];
} if ([message.name isEqualToString:@"showSendMsg"]) {
NSArray *array = message.body;
NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",array.firstObject,array.lastObject];
[self showMsg:info];
}
} - (void)showMsg:(NSString *)msg {
[[[UIAlertView alloc] initWithTitle:nil message:msg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil] show];
} @end
html代码：
<html>
<!--描述网页信息-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小黄</title>
<style>
*{
font-size: 50px;
} .btn{height:80px; width:%; padding: 0px 30px; background-color: #0071E7; border: solid 1px #0071E7; border-radius:5px; font-size: 1em; color: white}
</style> <script>
function clear() {
document.getElementById('mobile').innerHTML = ''
document.getElementById('name').innerHTML = ''
document.getElementById('msg').innerHTML = ''
} //OC调用JS的方法列表
function alertMobile() {
//这里已经调用过来了 但是搞不明白为什么alert方法没有响应
//alert('我是上面的小黄 手机号是:13300001111')
document.getElementById('mobile').innerHTML = '我是上面的小黄 手机号是:13300001111'
} function alertName(msg) {
//alert('你好 ' + msg + ', 我也很高兴见到你')
document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'
} function alertSendMsg(num,msg) {
//window.alert('这是我的手机号:' + num + ',' + msg + '!!')
document.getElementById('msg').innerHTML = '这是我的手机号:' + num + ',' + msg + '!!'
} //JS响应方法列表
function btnClick1() {
window.webkit.messageHandlers.showMobile.postMessage(null)
} function btnClick2() {
window.webkit.messageHandlers.showName.postMessage('xiao黄')
} function btnClick3() {
window.webkit.messageHandlers.showSendMsg.postMessage(['', 'Go Climbing This Weekend !!!'])
} </script> </head> <!--网页具体内容-->
<body>
<br/> <div>
<label>小黄：</label>
</div>
<br/> <div id="mobile"></div>
<div>
<button class="btn" type="button" onclick="btnClick1()">小红的手机号</button>
</div>
<br/> <div id="name"></div>
<div>
<button class="btn" type="button" onclick="btnClick2()">打电话给小红</button>
</div>
<br/> <div id="msg"></div>
<div>
<button class="btn" type="button" onclick="btnClick3()">发短信给小红</button>
</div> </body>
</html>
oc代码中 的文件路径 根据实际情况定 ，如果是在项目中本地的就用我注释的方法，如果是在电脑桌面上就可以用没有注释的路径，根据实际情况来。
就这样就完成了。
想要源码的 联系我邮箱 673658917@qq.com
或者是加我qq 673658917
与君共勉
iOS iOS与html进行交互的更多相关文章
- iOS UIWebView与JavaScript的交互 相关资料
UIWebView自适应宽度 iOS UIWebView中javascript与Objective-C交互.获取摄像头 iOS中JavaScript和OC交互 iOS与js交互,获取webview完整 ...
- [IOS]IOS UI指南
[IOS]IOS UI指南 众所周知,IOS的界面设计,越来越流行,可以说都形成了一个标准,搜集了一些资料,供自己以后学习使用! iOS Human Interface Guidelines (中文翻 ...
- iOS中JavaScript和OC交互
转载自:http://www.devzeng.com/blog/ios-uiwebview-interaction-with-javascript.html 还可参考的文章:http://blog.c ...
- iOS中UIWebView使用JS交互 - 机智的新手
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- iOS web view 与 js 交互
移动应用中许多复杂的且经常改动的页面会使用H5进行代替native,这里就会使用到js和webview的交互 iOS里面,UIWebView提供了方法stringByEvaluatingJavaScr ...
- iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
- iOS下原生与JS交互(总结)
iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一 第一种方式是用JS ...
- iOS WKWebView OC 与 JS 交互学习
我写WKWebView 想让 服务端相应 一个 方法但是不响应,根据 UIWebView 用 JSContext就能拿到响应的处理经验是不是服务端 也需要 对 WKwebView有兼容的一个写法??? ...
- iOS中UIWebView使用JS交互
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
随机推荐
- Unity光照图UV显示
美术的同学觉得 Unity 光照图烘焙的不够美丽,需要在 ps 里修一修,但是不知道每个物体对应的光照图在哪个区域,UV 是如何分布的,于是要求写一个工具显示,于是有了下面这个: 打开场景自动读取当前 ...
- 【CSS3】Advanced3：Universal, Child, and Adjacent Selectors
1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...
- 非递归实现先序遍历 java leecode 提交
写完才知道自己学习都是似是而非啊,大家可以也在leecode上提交代码,纯手写,离开eclipse第一种方式:数据结构书上的,使用栈大概思路.1.不断将根节点的左孩子的左孩子直到为空,在这个过程入栈. ...
- BI 多维立方体CUBE
在Bi领域,cube是一个非常重要的概念,是多维立方体的简称,主要是用于支持联机分析应用(OLAP),为企业决策提供支持.Cube就像一个坐标系,每一个Dimension代表一个坐标系,要想得到一个一 ...
- shell 加法
shell 加法 i=$i+1 是在i的变量值后加上字符串'+1' 总结:其他语言中的$i++操作在shell中表示如下:#!/bin/bash n=1;echo -n "$n " ...
- linkscrpit
一 section是什么? 好吧,我们需要解释一下平时编译链接生成的二进制可执行程序(比如说ELF,EXE也行),so或者dll,内核(非压缩的,参加本系列第一节内容.vmlinux),或者ko是怎么 ...
- wave文件(*.wav)格式、PCM数据格式, goldwave 可以播放pcm raw audio
1. 音频简介 经常见到这样的描述: 44100HZ 16bit stereo 或者 22050HZ 8bit mono 等等. 44100HZ 16bit stereo: 每秒钟有 44100 次采 ...
- Android：从程序员到架构师之路Ⅰ
一般而言,人们大多先学开发(代码)的技术,随后才学(架构)设计的方法.然而,在实际做事时,却是先设计,随后才写出代码来.敏捷过程则让设计与写码迭代循环下去,一直到完成为止.在本课程里,就遵循敏捷的迭代 ...
- eclipse中的maven配置
1.下载最新版eclipse,包含maven版本 2.配置maven本地仓库(修改settings.xml)
- Android框架结构图