//
// 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. 利用django创建一个投票网站(六)

    建你的第一个 Django 项目, 第六部分 这一篇从第五部分(zh)结尾的地方继续讲起.再上一节中我们为网络投票程序编写了测试,而现在我们要为它加上样式和图片. 除了服务端生成的 HTML 以外,网 ...

  2. SWMM模型子汇水区划分的几种方法

    子汇水区的划分是SWMM模型建模的主要步骤之一,划分的好坏对结果精度有比较大的影响.概括来讲,子汇水区的划分有以下几种思路: (1)根据管网走向.建筑物和街道分布,直接人工划分子汇水区.这个方法适用于 ...

  3. maven引入多个spring jar包中存在同名文件的问题

    项目打包后执行报错:Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespaceht ...

  4. web前端基础知识-(八)Django进阶之数据库对象关系映射

    Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  5. nginx-1.8.0 rpm包制作

    1.安装rpm-build # yum install rpm-build 2.创建制作RPM包目录 # cat /root/.rpmmacros %_topdir /root/rpmbuild %_ ...

  6. php实现返回上一页的功能

    php实现返回上一页的功能的3种有效方法 header(location:你的上一页的路径);   //   注意这个函数前不能有输出      header(location:.getenv(&qu ...

  7. InputStream、InputStreamReader和Reader的关系

    InputStream:得到的是字节输入流,InputStream.read("filename")之后,得到字节流 Reader:读取的是字符流 InputStreamReade ...

  8. Django基础,Day6 - 单元测试tests

    在django项目app目录下,有个tests.py,我们通常可以直接在这文件中写我们的单元测试代码. test for a model 根据前面章节的操作步骤下来,在Question Model中有 ...

  9. Apache服务器安装过程及问题的解决(for windows system32bit)

    在使用Hbuilder设计网站时,在制作本站搜索时,用到了Php文件,而Hbuilder的内置web服务器不支持php的解析, 所以需要安装配置外部服务器,有多个选择,我安装的apache服务器,并遇 ...

  10. nginx tomcat session丢失的问题

    nginx反向代理tomcat,出现seesion获取不到的问题. 网上搜索到的解决方案大多是集群tomcat共享session共享的问题,但我这个只有一台tomcat服务器,不涉及到服务器集群问题. ...