【iOS】UIWebView HTML5 擴展

對於很多iOS開發人員來講，HTML5的內容比較陌生。

尤爲是UIWebView類的 stringByEvaluatingJavaScriptFromString 方法

讓很是多人認爲又得學一種新的語言。

而這一部分也是項目中學生常問的問題之中的一個。

本文以Category（類目）的方式擴展了UIWebView類，將一些常用的JavaScript操做封裝成UIWebView類方法。

最新源碼下載地址：https://github.com/duzixi/UIWebView-HTML5（持續維護）

原文首發地址：http://blog.csdn.net/duzixi/article/details/36047201

頭文件（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