UIWebView 的 HTML5 扩展

http://blog.csdn.net/duzixi/article/details/36047201

对于不少iOS开发者来说,HTML5的内容比较陌生。

尤其是UIWebView类的 stringByEvaluatingJavaScriptFromString 方法

让很多人觉得又得学一种新的语言。

而这一部分也是项目中学生常问的问题之一。

本文以Category(类目)的方式扩展了UIWebView类,将一些常用的JavaScript操作封装成UIWebView类方法。

最新源代码下载地址:https://github.com/duzixi/UIWebView-HTML5(持续维护)

头文件(UIWebView+HTML5.h)

//
//  UIWebView+HTML5.h
//  WebViewJS
//
//  Created by 杜子兮(duzixi) on 14-6-30.
//  Edited  by 杜子兮(duzixi) on 14-7-11. 修改网页图片显示大小
//                                       添加(jQuery)
//  Copyright (c) 2014年 lanou3g.com 蓝鸥. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIWebView (JavaScript)

#pragma mark -
#pragma mark 获取网页中的数据

///  获取某个标签的结点个数
- (int)nodeCountOfTag:(NSString *)tag;

///  获取当前页面URL
- (NSString *) getCurrentURL;

///  获取标题
- (NSString *) getTitle;

///  获取图片
- (NSArray *) getImgs;

///  获取当前页面所有链接
- (NSArray *) getOnClicks;

#pragma mark -
#pragma mark 改变网页样式和行为

///  改变背景颜色
- (void) setBackgroundColor:(UIColor *)color;

///  为所有图片添加点击事件(网页中有些图片添加无效)
- (void) addClickEventOnImg;

///  改变所有图像的宽度
- (void) setImgWidth:(int)size;

///  改变所有图像的高度
- (void) setImgHeight:(int)size;

///  改变指定标签的字体颜色
- (void) setFontColor:(UIColor *) color withTag:(NSString *)tagName;

///  改变指定标签的字体大小
- (void) setFontSize:(int) size withTag:(NSString *)tagName;

@end

实现文件(UIWebView+HTML5.m):

//
//  UIWebView+HTML5.m
//
//  Created by 杜子兮(duzixi) on 14-6-30.
//  Edited  by 杜子兮(duzixi) on 14-7-11. 修改网页图片显示大小
//                                       添加(jQuery)
//  Copyright (c) 2014年 lanou3g.com 蓝鸥. All rights reserved.
//

#import "UIWebView+HTML5.h"
#import "UIColor+Change.h"

@implementation UIWebView (JavaScript)

#pragma mark -
#pragma mark 获取网页中的数据

///  获取某个标签的结点个数
- (int)nodeCountOfTag:(NSString *)tag
{
    NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName(‘%@‘).length", tag];
    int len = [[self stringByEvaluatingJavaScriptFromString:jsString] intValue];
    return len;
}

///  获取当前页面URL
- (NSString *)getCurrentURL
{
    return [self stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

///  获取标题
- (NSString *)getTitle
{
    return [self stringByEvaluatingJavaScriptFromString:@"document.title"];
}

///  获取所有图片链接
- (NSArray *)getImgs
{
    NSMutableArray *arrImgURL = [[NSMutableArray alloc] init];

    for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName(‘img‘)[%d].src", i];
        [arrImgURL addObject:[self stringByEvaluatingJavaScriptFromString:jsString]];
    }
    return arrImgURL;
}

///  获取当前页面所有点击链接
- (NSArray *)getOnClicks
{
    NSMutableArray *arrOnClicks = [[NSMutableArray alloc] init];

    for (int i = 0; i < [self nodeCountOfTag:@"a"]; i++) {
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName(‘a‘)[%d].getAttribute(‘onclick‘)", i];
        NSString *clickString = [self stringByEvaluatingJavaScriptFromString:jsString];
        NSLog(@"%@", clickString);
        [arrOnClicks addObject:clickString];
    }
    return arrOnClicks;
}

#pragma mark -
#pragma mark 改变网页样式和行为

///  改变背景颜色
- (void)setBackgroundColor:(UIColor *)color
{
    NSString * jsString = [NSString stringWithFormat:@"document.body.style.backgroundColor = ‘%@‘",[color webColorString]];
    [self stringByEvaluatingJavaScriptFromString:jsString];
}

///  为所有图片添加点击事件(网页中有些图片添加无效,需要协议方法配合截取)
- (void)addClickEventOnImg
{
    for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
        //利用重定向获取img.src,为区分,给url添加‘img:‘前缀
        NSString *jsString = [NSString stringWithFormat:
            @"document.getElementsByTagName(‘img‘)[%d].onclick =               function() { document.location.href = ‘img‘ + this.src; }",i];
        [self stringByEvaluatingJavaScriptFromString:jsString];
    }
}

///  改变所有图像的宽度
- (void) setImgWidth:(int)size
{
    for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName(‘img‘)[%d].width = ‘%d‘", i, size];
        [self stringByEvaluatingJavaScriptFromString:jsString];
    }
}

///  改变所有图像的高度
- (void) setImgHeight:(int)size
{
    for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName(‘img‘)[%d].height = ‘%d‘", i, size];
        [self stringByEvaluatingJavaScriptFromString:jsString];
    }
}

///  改变指定标签的字体颜色
- (void)setFontColor:(UIColor *)color withTag:(NSString *)tagName
{
    NSString *jsString = [NSString stringWithFormat:
        @"var nodes = document.getElementsByTagName(‘%@‘);           for(var i=0;i<nodes.length;i++){              nodes[i].style.color = ‘%@‘;}", tagName, [color webColorString]];
    [self stringByEvaluatingJavaScriptFromString:jsString];
}

///  改变指定标签的字体大小
- (void)setFontSize:(int)size withTag:(NSString *)tagName
{
    NSString *jsString = [NSString stringWithFormat:
        @"var nodes = document.getElementsByTagName(‘%@‘);           for(var i=0;i<nodes.length;i++){              nodes[i].style.fontSize = ‘%dpx‘;}", tagName, size];
    [self stringByEvaluatingJavaScriptFromString:jsString];
}
@end

原文出处:http://blog.csdn.net/duzixi/article/details/36047201

UIWebView 的 HTML5 扩展

时间: 2024-10-07 05:18:43

UIWebView 的 HTML5 扩展的相关文章

UIWebView的HTML5扩展之canvas篇

先前发布大那个所谓的"HTML5"扩展严格说来还算不是"HTML5".曲曲几行JS代码就自诩为HTML5扩展多少有些标题党的嫌疑. 而相比之下,本篇的主题canvas可以说算是真正的HTML5扩展了.canvas作为HTML5标准体系下的JavaScript API, 不仅被苹果系统自带的Safari所支持,也被UIWebView类所支持. 下面直接贴上新增类目canvas部分的源代码. 完整代码下载地址:https://github.com/duzixi/UIWe

HTML5扩展之微数据与丰富网页摘要itemscope, itemtype, itemprop

HTML5扩展之微数据与丰富网页摘要 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2058 一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO).

浅谈UIWebView,HTML5与Native的混合开发

今天在做项目的时候,遇到了UIWebView的问题,所以今天顺便总结一下,同时也简单的谈了一下Native与H5的混合开发,关于混合开发这块,研究的不算太好,希望广大博友指正~~ 网络开发中,当公司已经使用 HTML5 技术实现同时适应 Android 和 iOS 等多个平台的网页时,这时往往需要我们 iOS 平台能够嵌入网页并进行各种交互, 这里我们考虑的方案就是:使用 UIWebView 网页控件 UIWebView是苹果给我们提供展示网页的一种控件. UIWebView的基本用法 我们一般

HTML5扩展之微数据与丰富网页摘要

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

HTML5扩展之微数据与丰富网页摘要——张鑫旭

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

HTML5 扩展内容学习

1.HTML accesskey 属性:带有指定快捷键的超链接: 示例代码: <a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程</a><br /> 注释:请使用Shift + Alt + accessKey来访问带有指定快捷键的元素. 2.id.class与style: 1).id保持唯一性: 2).class多用在css样式中,定义样式类名: 3).

前端入门HTML5扩展知识(一)

一. 请描述一个网页从开始请求到最终显示的完整过程? 1.  在浏览器中输入网址: 2.  发送至 DNS 服务器并获得域名对应的 WEB 服务器的 IP 地址: 3.  与 WEB 服务器建立 TCP 连接: 4.  浏览器向 WEB 服务器的 IP 地址发送相应的 HTTP 请求: 5. WEB 服务器响应请求并返回指定 URL 的数据,或错误信息,如果设定重定向,则重定向到新的 URL 地址. 6.  浏览器下载数据后解析 HTML 源文件,解析的过程中实现对页面的排版,解析完成后在浏览器

DOM扩展-HTML5、专有扩展

 HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时,先后顺序不重要. 1 //取得所有类中包含"username"和"current"的元素,类名的先后顺序不重要 2 var allCurrentUsername = document.getElementsByClassName('username current');

HTML5基础扩展——地理位置、本地存储、缓存

HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发,HTML5是比较火的.因此这几款扩展功能,感觉更多是从手机,平板等角度出发的. 一,地理定位:首先看一下地理位置的定位的几种形式:IP地址,GPS(Global Positioning System ),Wifi,GSM(Global System for Mobile Communic