//
// ViewController.m
// OC与JS交互之UIWebView
//
// Created by user on 16/8/15.
// Copyright © 2016年 rrcc. All rights reserved.
// #import "ViewController.h"
#define KSCreenSize [UIScreen mainScreen].bounds.size
@interface ViewController () <UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.webView.delegate = self;
self.webView.backgroundColor = [UIColor redColor]; //加载本地html 初始化webview
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
[self.webView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
} - (IBAction)btnClick:(UIButton *)sender {
//网页加载完成之后调用JS代码才会执行,因为这个时候html页面已经注入到webView中并且可以响应到对应方法
if (sender.tag == ) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertMobile()"];
//对应js内部 alert('我是上面的小黄 手机号是:13300001111') } if (sender.tag == ) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertName('小红')"];
//alert('你好 ' + msg + ', 我也很高兴见到你')
} if (sender.tag == ) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')"];
//alert('这是我的手机号:' + num + ',' + msg + '!!')
}
/*
总结: oc调用js代码
效果:点击oc原声按钮 弹出webview aleartVew
1 首选js代码需定义好提供给OC调用JS的方法列表,
例如:
//提供给OC调用JS的方法列表
function alertMobile() {
alert('我是上面的小黄 手机号是:13300001111')
} function alertName(msg) {
alert('你好 ' + msg + ', 我也很高兴见到你')
} function alertSendMsg(num,msg) {
alert('这是我的手机号:' + num + ',' + msg + '!!')
} 2 webview 通过stringByEvaluatingJavaScriptFromString方法,调用js写好的代码,并传入参数。
例如:
// 原声按钮点击事件 调用的js代码
if (sender.tag == 234) {
[self.webView stringByEvaluatingJavaScriptFromString:@"alertName('小红')"];
//alert('你好 ' + msg + ', 我也很高兴见到你')
} */ } #pragma mark - JS调用OC方法列表 - (void)showMobile {
[self showMsg:@"我是下面的小红 手机号是:18870707070"];//oc代码
} - (void)showName:(NSString *)name {
NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",name]; [self showMsg:info];//oc代码
} - (void)showSendNumber:(NSString *)num msg:(NSString *)msg {
NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",num,msg]; [self showMsg:info];//oc代码
} - (void)showMsg:(NSString *)msg { [[[UIAlertView alloc] initWithTitle:nil message:msg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil] show];
} #pragma mark - UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"-----%@",NSStringFromSelector(_cmd));//_cmd 当前方法
NSLog(@"-----%@",request.URL);
//OC调用JS是基于协议拦截实现的 下面是相关操作
/* rrcc://showMobile
rrcc://showName_?xiaohuang
rrcc://showSendNumber_msg_?13300001111&go%20climbing%20this%20weekend
*/
NSString *absolutePath = request.URL.absoluteString; NSString *scheme = @"rrcc://"; if ([absolutePath hasPrefix:scheme]) {
NSString *subPath = [absolutePath substringFromIndex:scheme.length];//截取rrcc://得到后面的所有字符串 if ([subPath containsString:@"?"]) {//1个或多个参数 js按钮3 rrcc:// showSendNumber_msg_?13300001111&go%20climbing%20this%20weekend if ([subPath containsString:@"&"]) {//多个参数
NSArray *components = [subPath componentsSeparatedByString:@"?"]; //showSendNumber_msg_ ;13300001111&go%20climbing%20this%20weekend NSString *methodName = [components firstObject];//showSendNumber_msg_ methodName = [methodName stringByReplacingOccurrencesOfString:@"_" withString:@":"];//showSendNumber:msg:
SEL sel = NSSelectorFromString(methodName);//showSendNumber:msg: NSString *parameter = [components lastObject];//13300001111&go%20climbing%20this%20weekend
NSArray *params = [parameter componentsSeparatedByString:@"&"];//13300001111;go%20climbing%20this%20weekend if (params.count == ) {
if ([self respondsToSelector:sel]) {
[self performSelector:sel withObject:[params firstObject] withObject:[params lastObject]];//showSendNumber(13300001111):msg:(go%20climbing%20this%20weekend)
}
} } else {//1个参数 js按钮2 rrcc:// showName_?xiaohuang
NSArray *components = [subPath componentsSeparatedByString:@"?"];//showName_;xiaohuang NSString *methodName = [components firstObject];//showName_
methodName = [methodName stringByReplacingOccurrencesOfString:@"_" withString:@":"];//showName:
SEL sel = NSSelectorFromString(methodName);//showName: NSString *parameter = [components lastObject];//xiaohuang if ([self respondsToSelector:sel]) {
[self performSelector:sel withObject:parameter];//showName:
} } } else {//没有参数 js按钮1 rrcc:// showMobile
NSString *methodName = [subPath stringByReplacingOccurrencesOfString:@"_" withString:@":"];
SEL sel = NSSelectorFromString(methodName);//showMobile if ([self respondsToSelector:sel]) {//showMobile
[self performSelector:sel];
}
}
} return YES;
/*
效果:点击webview上的按钮,弹出oc原声aleartView
总结:js调用oc代码 操作:
1 js代码定义好webview上的响应方法(本例监听按钮响应方法)
//JS响应方法列表
function btnClick1() {
location.href = "rrcc://showMobile"
} function btnClick2() {
location.href = "rrcc://showName_?xiaohuang"
} function btnClick3() {
location.href = "rrcc://showSendNumber_msg_?13300001111&go climbing this weekend"
} 2 oc通过webView代理方法- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
截取url地址,解析地址根据按钮标签(),判断响应事件(本例判断每个按钮点击). NSString *absolutePath = request.URL.absoluteString; //获取url地址 得到:rrcc://showMobile NSString *scheme = @"rrcc://"; //根据关键字解析 if ([absolutePath hasPrefix:scheme]) { //根据关键字解析 if ([subPath containsString:@"?"]) {//1个或多个参数 if ([subPath containsString:@"&"]) {//多个参数
//点击 js按钮3
ps:获取js地址//showSendNumber_msg_13300001111&go%20climbing%20this%20weekend,解析地址中的包含的参数13300001111;go%20climbing%20this%20weekend,获取参数,为oc所用,包含交互信息两个. } else {//1个参数 js按钮2
//点击 js按钮2
ps:获取js地址rrcc://showName_?xiaohuang,解析地址中的包含的参数,获取参数xiaohuang,为oc所用,包含交互信息一个. } } else {//没有参数 //点击 js按钮1
ps:获取js地址rrcc://showMobile,解析地址中的包含的参数无,无获取参数,纯粹监听事件,不包含交互信息一个. }
}
*/
} - (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"%@",NSStringFromSelector(_cmd));
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"%@",NSStringFromSelector(_cmd));
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:( NSError *)error {
NSLog(@"%@",NSStringFromSelector(_cmd));
}
/*
点击webViwe
*/ @end
<html>
<!--描述网页信息-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小黄</title>
<style>
.btn{height:40px; width:60%; padding: 0px 30px; background-color: #0071E7; border: solid 1px #0071E7; border-radius:5px; font-size: 1.2em; color: white}
</style> <script> //提供给OC调用JS的方法列表
function alertMobile() {
alert('我是上面的小黄 手机号是:13300001111')
} function alertName(msg) {
alert('你好 ' + msg + ', 我也很高兴见到你')
} function alertSendMsg(num,msg) {
alert('这是我的手机号:' + num + ',' + msg + '!!')
} //JS响应方法列表
function btnClick1() {
location.href = "rrcc://showMobile"
} function btnClick2() {
location.href = "rrcc://showName_?xiaohuang"
} function btnClick3() {
location.href = "rrcc://showSendNumber_msg_?13300001111&go climbing this weekend"
} </script> </head> <!--网页具体内容-->
<body>
<br/><br/> <div>
<label>小黄:13300001111</label>
</div>
<br/><br/> <div>
<button class="btn" type="button" onclick="btnClick1()">小红的手机号</button>
</div>
<br/> <div>
<button class="btn" type="button" onclick="btnClick2()">打电话给小红</button>
</div>
<br/> <div>
<button class="btn" type="button" onclick="btnClick3()">发短信给小红</button>
</div> </body>
</html>

JS WEB 交互问题的更多相关文章

  1. iOS中web与Js的交互

    问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...

  2. 利用OpenShift托管Node.js Web服务进行微信公众号开发

    最近写了一个微信的翻译机器人.用户只要关注该公众号,发送英文的消息,就能收到中文翻译的回复.有兴趣的读者可以扫描下面的二维码关注该公众号,尝试发送英文单词试试看.(有时候第一次发送单词会收到“该公众号 ...

  3. Android与H5交互(java与js的交互)

    一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...

  4. 10 个基于 jQuery 的 Web 交互插件推荐

    英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...

  5. android code 和js的交互

    小弟现在需要android code 和js的交互.出现了问题,求大家带一带啊. 我的页面:<!DOCTYPE html><html lang="en">& ...

  6. Node.js Web模块

    什么是Web服务器? Web服务器是处理由HTTP客户端发送的,如web浏览器的HTTP请求的软件应用程序,并返回响应于客户端网页. Web服务器通常伴随着图片,样式表和脚本的HTML文档. 大多数W ...

  7. iOS中使用UIWebView与JS进行交互

    iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...

  8. Adriod与HTML+JS的交互

    本篇主要实现的功能点: Android 调用HTML中的javascript脚本 HTML中的javascript脚本调用Android本地代码 Android 调用HTML中的javascript脚 ...

  9. 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

    [源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...

随机推荐

  1. python安装、模块安装

    python安装 windows 下载安装包 https://www.python.org/downloads 改环境变量 [右键计算机]-->[属性]-->[高级系统设置]-->[ ...

  2. ionic ios iframe 白屏

    之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...

  3. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  4. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. http协议

    什么是协议 是指关于计算机通信的一整套规则,是为完成计算机网络通信而制订的规则.约定和标准. http协议是众多通信协议中的一种,超文本传输协议 (HTTP-Hypertext transfer pr ...

  6. IRequiresSessionState接口控制

    刚刚接触.net web端的朋友都会被Session坑过,莫名其妙的不能读取Session数据,后来知道原来有IRequiresSessionState这个接口,不继承的就不能读取Session里面的 ...

  7. php如何防止图片盗用/盗链的两种方法(转)

    图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法 设置images目录不充许http访问 Apache服 ...

  8. iOS小知识:计算字符串长度(如果有表情,表情的长度为1)

    在做项目的时候,textField能够输入表情,但是iOS的表情是占两个字符的,再计算字符串长度的时候就和想象的不一样了,所以用了次方法会将表情的长度转成1,最后得到的字符串的长度就是能看到的实际的长 ...

  9. .net导入excel数据到数据库中

    在开发过程中我们经常面临着需要将数据导出或者导入到系统中,例如一些生产管理系统,项目管理系统等等都会有这样的需求: 将excel数据到系统中思路:获取excel中每一行的数据,然后存入集合中,批量添加 ...

  10. DEV MessageBox

    DialogResult dr = DevExpress.XtraEditors.XtraMessageBox.Show("确定要删除所有错误映射数据吗?", "提示&q ...