IOS UIWebView与JavaScript交互实现Web App
2016-01-25 00:00
253 查看
上一篇文章讲到了Android WebView与JavaScript的交互问题,现在来讲一下IOS的UIWebView与JavaScript的交互问题。和Android的相比,IOS的会略显笨拙一些不大友好,然而也算是在未引用第三方框架的基础上完成了交互的问题。OK,现在开始吧。
1.首先在IOSA->Application下选择Single View Application创建一个IOS应用,命名为JSInteraction,然后我删去了Info.plist文件里Main storyboard file base name字段,选择加载ViewController的View。
1.修改AppDelegate.m的didFinishLaunchingWithOptions并添加如下代码。
[objc] view plaincopy
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[self.window makeKeyAndVisible];
ViewController * viewController = [[ViewController alloc] init];
[self.window setRootViewController:viewController];
return YES;
}
2.修改类ViewController,添加一个WebView并添加与JavaScript交互的功能。
[objc] view plaincopy
//
// ViewController.h
// JSInteraction
//
// Created by Winter on 15/8/12.
// Copyright (c) 2015年 YLD. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIWebViewDelegate> {
UINavigationItem *item_;
}
@property (nonatomic, strong) UIWebView *webView;
@end
在WebView的shouldStartLoadWithRequest处理JS的请求根据JS的传入的Url来判断JS所需的操作。在这里面我主要提供了一个弹出对话框的接口,当JS传入的URL是以jsinteraction:showAleart开头时则调用ViewController里的showAlert方法,而JS需要从App获取数据时,则需要WebView调用stringByEvaluatingJavaScriptFromString方法并传入后台JS提供的方法并传入参数来实现传递数据给后台的JS。有点绕,且看看实现方式。
[objc] view plaincopy
//
// ViewController.m
// JSInteraction
//
// Created by Winter on 15/8/12.
// Copyright (c) 2015年 YLD. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UINavigationBar *bar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, 30.0f)];
bar.backgroundColor = [UIColor clearColor];
item_ = [[UINavigationItem alloc] initWithTitle:@""];
[bar pushNavigationItem:item_ animated:YES];
[self.view addSubview:bar];
self.view.backgroundColor = [UIColor colorWithRed:0.0f green:20.0f blue:255.0f alpha:1.0f];
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(10.0f, 60.0f, self.view.bounds.size.width-20, self.view.bounds.size.height - 80.0f)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
[self initializeWebView];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
* Load local html file
*/
- (void)initializeWebView {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"LoginJs/login" ofType:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]]];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *requestString = [[request URL] absoluteString];
NSArray *headers = [requestString componentsSeparatedByString:@":"];
if([headers count]>1) {
NSString *appAction = [(NSString *)[headers objectAtIndex:0] lowercaseString];
NSString *funtionName =(NSString*)[headers objectAtIndex:1];
if([appAction isEqualToString:@"jsinteraction"]) {
if([funtionName isEqualToString:@"showAleart"] && [headers count] > 2){
NSString* message = (NSString*)[headers objectAtIndex:2];
[self showAleart:message];
}
return NO;
} else if([appAction isEqualToString:@"executescript"]){
if([funtionName isEqualToString:@"loginObj.setLoginInfo"]){
NSString *loginInfo = @"'{\"Username\":\"YLD\",\"Password\":\"111\"}'";
NSString *execute = [NSString stringWithFormat:@"loginObj.setLoginInfo(%@)", loginInfo];
[webView stringByEvaluatingJavaScriptFromString:execute];
}
return NO;
}
}
return YES;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
item_.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
/**
* 弹出消息对话框
*/
- (void)showAleart: (NSString *) message {
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Warning"
message:message
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles:nil , nil nil];
[alertView show];
}
@end
3.IOS端已经完成,根据目前的实现,JS端需要请求的URL须是以下两种格式才能实现与IOS的交互。
1)jsinteraction:showAleart:xxxx
2) executescript:loginObj.setLoginInfo:xxxx
4.下面实现web端的功能,新建一个文件夹命名为LoginJs,在改文件夹下添加两个文件,login.html和login.js。login.html有两个文本输入框我们会在程序启动时让IOS端为其注入相应的数据,再有一个登录按钮,点击按钮则会调用IOS端ViewController的showAlert方法,弹出对话框。
[html] view plaincopy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="title">Login</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body style="background:lightblue">
<div style="margin-top: 20px;margin-left: 20px">
<div>
<label>Username:</label>
<input id="txtUsername" type="text" style="margin-left: 20px"/>
</div>
<div style="margin-top: 20px">
<label>Password:</label>
<input id="txtPassword" type="text" style="margin-left: 20px"/>
</div>
<div style="margin-top: 20px;margin-left: 160px">
<button onclick="loginObj.login()" style="width:100px">Login</button>
</div>
</div>
</body>
</html>
在login.js中实现相应的方法,在页面加载完成时会调用请求,请求IOS端的数据。实现与IOS端的交互主要是依靠更改window的location。
[javascript] view plaincopy
"user strict"
var Login = (function(){
function Login(){
}
Login.prototype.login = function(){
this.appRequest("JSInteraction", "showAleart", "Start...");
}
/**
* 设置登录信息
* @logininfoJson json参数字符串
*/
Login.prototype.setLoginInfo = function(logininfoJson){
//解析json字符串
var logininfo = eval("("+logininfoJson+")");
document.getElementById("txtUsername").value = logininfo.Username;
document.getElementById("txtPassword").value = logininfo.Password;
}
Login.prototype.appRequest = function(appAction, functionName, parameters){
var requestCommand = appAction + ":" + functionName + ":" + parameters;
window.location = requestCommand;
}
return Login;
})();
var loginObj = new Login();
window.onload=function(){
loginObj.appRequest("executeScript", "loginObj.setLoginInfo", "");
}
5.接下来我们将web的LoginJs添加至IOS的JSInteraction工程中
添加完成后,工程结构如下图
6.运行App,效果如下所示。
点击Login按钮
源代码下载页:http://download.csdn.net/detail/leyyang/9000543
1.首先在IOSA->Application下选择Single View Application创建一个IOS应用,命名为JSInteraction,然后我删去了Info.plist文件里Main storyboard file base name字段,选择加载ViewController的View。
1.修改AppDelegate.m的didFinishLaunchingWithOptions并添加如下代码。
[objc] view plaincopy
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[self.window makeKeyAndVisible];
ViewController * viewController = [[ViewController alloc] init];
[self.window setRootViewController:viewController];
return YES;
}
2.修改类ViewController,添加一个WebView并添加与JavaScript交互的功能。
[objc] view plaincopy
//
// ViewController.h
// JSInteraction
//
// Created by Winter on 15/8/12.
// Copyright (c) 2015年 YLD. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIWebViewDelegate> {
UINavigationItem *item_;
}
@property (nonatomic, strong) UIWebView *webView;
@end
在WebView的shouldStartLoadWithRequest处理JS的请求根据JS的传入的Url来判断JS所需的操作。在这里面我主要提供了一个弹出对话框的接口,当JS传入的URL是以jsinteraction:showAleart开头时则调用ViewController里的showAlert方法,而JS需要从App获取数据时,则需要WebView调用stringByEvaluatingJavaScriptFromString方法并传入后台JS提供的方法并传入参数来实现传递数据给后台的JS。有点绕,且看看实现方式。
[objc] view plaincopy
//
// ViewController.m
// JSInteraction
//
// Created by Winter on 15/8/12.
// Copyright (c) 2015年 YLD. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UINavigationBar *bar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, 30.0f)];
bar.backgroundColor = [UIColor clearColor];
item_ = [[UINavigationItem alloc] initWithTitle:@""];
[bar pushNavigationItem:item_ animated:YES];
[self.view addSubview:bar];
self.view.backgroundColor = [UIColor colorWithRed:0.0f green:20.0f blue:255.0f alpha:1.0f];
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(10.0f, 60.0f, self.view.bounds.size.width-20, self.view.bounds.size.height - 80.0f)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
[self initializeWebView];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
* Load local html file
*/
- (void)initializeWebView {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"LoginJs/login" ofType:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]]];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *requestString = [[request URL] absoluteString];
NSArray *headers = [requestString componentsSeparatedByString:@":"];
if([headers count]>1) {
NSString *appAction = [(NSString *)[headers objectAtIndex:0] lowercaseString];
NSString *funtionName =(NSString*)[headers objectAtIndex:1];
if([appAction isEqualToString:@"jsinteraction"]) {
if([funtionName isEqualToString:@"showAleart"] && [headers count] > 2){
NSString* message = (NSString*)[headers objectAtIndex:2];
[self showAleart:message];
}
return NO;
} else if([appAction isEqualToString:@"executescript"]){
if([funtionName isEqualToString:@"loginObj.setLoginInfo"]){
NSString *loginInfo = @"'{\"Username\":\"YLD\",\"Password\":\"111\"}'";
NSString *execute = [NSString stringWithFormat:@"loginObj.setLoginInfo(%@)", loginInfo];
[webView stringByEvaluatingJavaScriptFromString:execute];
}
return NO;
}
}
return YES;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
item_.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
/**
* 弹出消息对话框
*/
- (void)showAleart: (NSString *) message {
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Warning"
message:message
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles:nil , nil nil];
[alertView show];
}
@end
3.IOS端已经完成,根据目前的实现,JS端需要请求的URL须是以下两种格式才能实现与IOS的交互。
1)jsinteraction:showAleart:xxxx
2) executescript:loginObj.setLoginInfo:xxxx
4.下面实现web端的功能,新建一个文件夹命名为LoginJs,在改文件夹下添加两个文件,login.html和login.js。login.html有两个文本输入框我们会在程序启动时让IOS端为其注入相应的数据,再有一个登录按钮,点击按钮则会调用IOS端ViewController的showAlert方法,弹出对话框。
[html] view plaincopy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="title">Login</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body style="background:lightblue">
<div style="margin-top: 20px;margin-left: 20px">
<div>
<label>Username:</label>
<input id="txtUsername" type="text" style="margin-left: 20px"/>
</div>
<div style="margin-top: 20px">
<label>Password:</label>
<input id="txtPassword" type="text" style="margin-left: 20px"/>
</div>
<div style="margin-top: 20px;margin-left: 160px">
<button onclick="loginObj.login()" style="width:100px">Login</button>
</div>
</div>
</body>
</html>
在login.js中实现相应的方法,在页面加载完成时会调用请求,请求IOS端的数据。实现与IOS端的交互主要是依靠更改window的location。
[javascript] view plaincopy
"user strict"
var Login = (function(){
function Login(){
}
Login.prototype.login = function(){
this.appRequest("JSInteraction", "showAleart", "Start...");
}
/**
* 设置登录信息
* @logininfoJson json参数字符串
*/
Login.prototype.setLoginInfo = function(logininfoJson){
//解析json字符串
var logininfo = eval("("+logininfoJson+")");
document.getElementById("txtUsername").value = logininfo.Username;
document.getElementById("txtPassword").value = logininfo.Password;
}
Login.prototype.appRequest = function(appAction, functionName, parameters){
var requestCommand = appAction + ":" + functionName + ":" + parameters;
window.location = requestCommand;
}
return Login;
})();
var loginObj = new Login();
window.onload=function(){
loginObj.appRequest("executeScript", "loginObj.setLoginInfo", "");
}
5.接下来我们将web的LoginJs添加至IOS的JSInteraction工程中
添加完成后,工程结构如下图
6.运行App,效果如下所示。
点击Login按钮
源代码下载页:http://download.csdn.net/detail/leyyang/9000543
相关文章推荐
- adb命令
- sdk manager更新失败
- Android TextView 加滚动条
- 蓝懿IOS图片编辑模块
- android:windowSoftInputMode属性
- Android组件式开发(2)——实现网格布局的RadioButton矩阵
- Android LayoutInflate的基本知识
- Android基础之本地广播及文件存储和SharedPreference存储
- Android ActionBar使用
- 常用Android工具类
- [Android]我对View的认识
- Unity学习之路(一)太空大战类游戏制作3
- android mvp快速开发框架介绍(dileber使用之小工具使用)
- 新浪微博Android-SDK分享网页功能
- Android中的NavigationDrawer的分析
- 本文转载自开源中国社区,写的不错,大家可以读一读:block全面分析
- 【cocos2d-x 3.x 学习与应用总结】4: 使用cocos compile编译apk
- pygame 写的 flappy bird
- Android 中的 ContentProvider
- ListView学习(二)-ListView缓存机制