@2016-06-13
学习Objective-C与JavaScript的交互首先要了解JavaScript.
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。```
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
HTML的全称是 HyperText Markup Language 超文本标记语言
其实它就是文本,由浏览器负责将它解析成具体的网页内容
HTML的组成跟XML类似,HTML由N个标签（节点、元素、标记）组成
HTML语法非常松散,目前的最新版是5.0,也就是HTML5
###JS交互介绍
作用 : 处理网页交互的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS演练</title>
<script>
</script>
</head>
<body>
<h1>JS语法演练</h1>
</body>
</html>
JS数据类型
js数据类型中没有int,float,boolean,string...
<script>
// 错误的定义的数据的方式
int num = 10;
</script>
数据类型由值决定的
<script>
// 整型
var a = 20;
// 字符串
var name = "张三";
// 浮点数
var float = 10.35;
</script>
JS方法
无参无返回值
<script>
// 字符串
var name = "张三";
// 调用网页弹框
alert(name);
// 定义方法
function showMsg() {
alert(name);
}
// 调用方法
showMsg();
</script>
有参有返回值
方法在调用传参时也是不需要指定参数类型的
方法有无返回值,就是看方法的内部实现有无返回结果
<script>
function add(x,y) {
alert(x+y);
return x+y;
}
// 调用方法
add(10,10);
</script>
JS交互
定义方法
<script>
// 定义方法
function add(x,y) {
alert(x+y);
return x+y;
}
</script>
定义按钮,指定点击事件
<body>
<h1>JS语法演练</h1>
<input type="button" value="戳我啊" onclick="javascript:add(10,10)">
</body>
JS交互结果
OC与JS交互
案例 : 点击网页图片,把图片下载下来并保存到相册
准备网页地址：
[http://m.dianping.com/tuan/deal/5501525]
在浏览器终端中写js代码删除网页中不需要的元素
网页的处理步骤:
以删除导航为例 :
1.先找到该节点 : var headerTag = document.getElementsByTagName('header')[0];
2.再找到父节点 : headerTag.parentNode
3.最后用它的父节点删除该节点 : headerTag.parentNode.removeChild(headerTag);
合并: var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);
删除导航
var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);
删除底部悬停按钮
var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);
删除底部布局
var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);
OC和JS的交互需要使用UIWebView这个桥梁的代理方法实现
-
(void)viewDidLoad {
[super viewDidLoad];NSURL *URL = [NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"];
self.webView.delegate = self;
[self.webView loadRequest:[NSURLRequest requestWithURL:URL]];
}
###OC调用JS
OC调用JS需要实现的代理方法
网页加载完成时调用的代理方法
当网页加载完成之后,通过OC的方法调用JS的代码,删除网页展示时不需要的内容
OC调用JS的代码还可以给网页中的标签添加点击事件或者给网页添加标签
- (void)webViewDidFinishLoad:(UIWebView *)webView;
网页加载完成之后,OC方法调用JS代码
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
OC调用JS的具体实现
-
(void)webViewDidFinishLoad:(UIWebView *)webView
{
// 拼接JS的代码
NSMutableString *JSStringM = [NSMutableString string];// 删除导航
[JSStringM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
// 删除底部悬停按钮
[JSStringM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
// 删除底部布局
[JSStringM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];// 给标签添加点击事件
[JSStringM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'hm://?src='+this.src};"];// OC调用JS代码
[webView stringByEvaluatingJavaScriptFromString:JSStringM];
}
###JS调用OC
JS调用OC需要实现的代理方法
拦截webView上所有的网络请求
JS与OC交互的桥梁
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
OC调用JS代码,给图片(标签)添加点击事件
-
(void)webViewDidFinishLoad:(UIWebView *)webView
{
// 拼接JS的代码
NSMutableString *JSStringM = [NSMutableString string];// 删除导航
[JSStringM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
// 删除底部悬停按钮
[JSStringM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
// 删除底部布局
[JSStringM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];// 给标签添加点击事件
[JSStringM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'hm://?src='+this.src};"];// OC调用JS代码
[webView stringByEvaluatingJavaScriptFromString:JSStringM];
}
给标签添加点击事件
[JSStringM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'hm://?src='+this.src};"];
给标签添加点击事件的目的 : 使标签可点击
点击事件发送网络请求的目的 : 可以拦截到标签的点击事件
自定义协议的目的 : 给事件设计一个特殊的标记,如果拦截到请求,就通过特殊的标记来区别要做的事情
拦截webView上所有的网络请求,筛选请求
-
(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSLog(@"%@",request.URL.absoluteString);// 拿到网页的请求地址
NSString *URLString = request.URL.absoluteString;
// 判断网页的请求地址协议是否是我们自定义的那个
NSRange range = [URLString rangeOfString:@"hm://?src="];
if (range.length > 0) {
// NSLog(@"你点击的是图片");// 取出图片的地址 NSString *imgURLString = [request.URL.absoluteString substringFromIndex:range.location+range.length];
// NSLog(@"%@",imgURLString);
// 下载图片
[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:imgURLString] options:0 progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
// 图片下载完成之后,保存到相册
UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
}];
}
return YES;
}
系统设计的图片保存到相册的指定方法,不能自定义其他方法
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
NSLog(@"保存成功");
}
