實(shí)現(xiàn)Webview的看圖模式

前言

由于公司項(xiàng)目需求,今天看了看關(guān)于js和webview交互的一些東西仔戈,由于以前沒接觸過這塊关串,算是自己的一個(gè)盲區(qū),因此記錄下來监徘,代碼實(shí)現(xiàn)的過程很簡(jiǎn)短晋修,先在此敲作一磚。

正文

1凰盔、獲取 <img> 元素

在webview的代理方法webViewDidFinishLoad中用js實(shí)現(xiàn)對(duì)頁(yè)面圖片URL數(shù)組的獲饶关浴:

static  NSString *const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";
//注入js方法
[webView stringByEvaluatingJavaScriptFromString:jsGetImages];
NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];

urlResurlt獲取到的是URL字符串,將其拆分到數(shù)組:

_mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
//去除最后一個(gè)空元素
if (_mUrlArray.count >= 2) {
    [_mUrlArray removeLastObject];
}

2户敬、添加圖片可點(diǎn)擊js

[_webView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
 var imgs=document.getElementsByTagName('img');\
 var length=imgs.length;\
 for(var i=0;i<length;i++){\
 img=imgs[i];\
 img.onclick=function(){\
 window.location.href='image-preview:'+this.src}\
 }\
 }"];
[_webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];

3落剪、捕獲到圖片的點(diǎn)擊事件

在webView的shouldStartLoadWithRequest代理方法中獲取被點(diǎn)擊圖片的url:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if ([request.URL.scheme isEqualToString:@"image-preview"]) {
    NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
    path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    //path 就是被點(diǎn)擊圖片的url
    [self loadPhotoWith:path];
    return NO;
}
return YES;
}

4睁本、顯示圖片

這里我用的是IDMPhotoBrowser:
- (void)loadPhotoWith: (NSString *)path {
// URLs array
__block NSInteger index;//圖片點(diǎn)擊的序號(hào)
NSMutableArray *photosURL = [NSMutableArray array];
[_mUrlArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
NSURL *url = [NSURL URLWithString:obj];
[photosURL addObject:url];
if ([path isEqualToString:obj]) {
index = idx;
}
}];
// Create an array to store IDMPhoto objects
NSMutableArray *photos = [NSMutableArray new];
for (NSURL *url in photosURL) {
IDMPhoto *photo = [IDMPhoto photoWithURL:url];
[photos addObject:photo];
}
IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos];
browser.displayCounterLabel = YES;
browser.displayActionButton = NO;
browser.displayArrowButton = YES;
[browser setInitialPageIndex:index];
[self presentViewController:browser animated:YES completion:nil];
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市忠怖,隨后出現(xiàn)的幾起案子呢堰,更是在濱河造成了極大的恐慌,老刑警劉巖凡泣,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枉疼,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鞋拟,警方通過查閱死者的電腦和手機(jī)往衷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來严卖,“玉大人,你說我怎么就攤上這事布轿∠剩” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵汰扭,是天一觀的道長(zhǎng)稠肘。 經(jīng)常有香客問我,道長(zhǎng)萝毛,這世上最難降的妖魔是什么项阴? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮笆包,結(jié)果婚禮上环揽,老公的妹妹穿的比我還像新娘。我一直安慰自己庵佣,他們只是感情好歉胶,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著巴粪,像睡著了一般通今。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肛根,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天辫塌,我揣著相機(jī)與錄音,去河邊找鬼派哲。 笑死臼氨,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的狮辽。 我是一名探鬼主播一也,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼巢寡,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了椰苟?” 一聲冷哼從身側(cè)響起抑月,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舆蝴,沒想到半個(gè)月后谦絮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡洁仗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年层皱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赠潦。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡叫胖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出她奥,到底是詐尸還是另有隱情瓮增,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布哩俭,位于F島的核電站绷跑,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏凡资。R本人自食惡果不足惜砸捏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望隙赁。 院中可真熱鬧垦藏,春花似錦、人聲如沸鸳谜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)咐扭。三九已至芭挽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝗肪,已是汗流浹背袜爪。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留薛闪,地道東北人辛馆。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親昙篙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子腊状,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • iOS開發(fā)系列--網(wǎng)絡(luò)開發(fā) 概覽 大部分應(yīng)用程序都或多或少會(huì)牽扯到網(wǎng)絡(luò)開發(fā),例如說新浪微博苔可、微信等缴挖,這些應(yīng)用本身可...
    lichengjin閱讀 3,661評(píng)論 2 7
  • 一同蜻、簡(jiǎn)介 近兩年隨著HTML5的迅速發(fā)展與日趨成熟棚点,越來越多的移動(dòng)開發(fā)者選擇使用HTML5來進(jìn)行混合開發(fā),不僅節(jié)約...
    RainyGY閱讀 1,872評(píng)論 1 12
  • 一湾蔓、簡(jiǎn)介 近兩年隨著HTML5的迅速發(fā)展與日趨成熟瘫析,越來越多的移動(dòng)開發(fā)者選擇使用HTML5來進(jìn)行混合開發(fā),不...
    寶寶teacher閱讀 2,308評(píng)論 3 15
  • UIWebView的基本了解 什么是UIWebView1.UIVebView是系統(tǒng)內(nèi)置的瀏覽器控件2.系統(tǒng)自帶的s...
    Mario_ZJ閱讀 2,810評(píng)論 0 2
  • 和辦公室的的一群實(shí)習(xí)生相處了個(gè)月默责,現(xiàn)在都大家因?yàn)楣ぷ靼涔桑瑢W(xué)習(xí)分崩離析,看著大家一口氣的喝下了最后的一杯檸檬水傻丝,好想說...
    我是一直流浪的豬閱讀 478評(píng)論 0 2