iOS 開發(fā)實(shí)現(xiàn)WKWebView點(diǎn)擊圖片后胧卤,瀏覽圖片唯绍。(交互處理1)2018-06-19

《使用markdown編輯》
我們都知道,WKWebview是沒有查看大圖的屬性或者方法的枝誊,所以只能通過js與之交互來實(shí)現(xiàn)這一功能况芒,原理:通過js獲取頁面的圖片,把它存放到數(shù)組叶撒,給圖片添加點(diǎn)擊事件绝骚,通過index顯示大圖就行了其實(shí)很簡單,給WKWebview寫個(gè)類別痊乾,添加兩個(gè)方法就行了皮壁,然后在WKWebview的兩個(gè)協(xié)議中調(diào)用下這兩個(gè)方法就行了。

第一步:

首先聲明個(gè)數(shù)組來接收圖片數(shù)組哪审,可是有個(gè)問題,那就是類別是聲明不了屬性的虑瀑,那怎么辦呢湿滓?我們可以通過runtime來設(shè)置屬性,runtime非常有用舌狗,我們以后的篇章會(huì)說到叽奥。
` staticcharimgUrlArrayKey;

  • (void)setMethod:(NSArray*)imgUrlArray{
    objc_setAssociatedObject(self, &imgUrlArrayKey, imgUrlArray, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }
  • (NSArray*)getImgUrlArray {
    returnobjc_getAssociatedObject(self, &imgUrlArrayKey);
    } `
    這樣就聲明了個(gè)數(shù)組

第二步:

方法一:通過js獲取網(wǎng)頁圖片數(shù)組
/*
通過js獲取htlm中圖片url
/
` -(NSArray
)getImageUrlByJS:(WKWebView
)wkWebView {
//查看大圖代碼
//js方法遍歷圖片添加點(diǎn)擊事件返回圖片個(gè)數(shù)
staticNSString*constjsGetImages =
@"function getImages(){
var objs = document.getElementsByTagName("img");
var imgUrlStr='';
for(var i=0;i
if(i==0){
if(objs[i].alt==''){
imgUrlStr=objs[i].src;
}
}else{
if(objs[i].alt==''){
imgUrlStr+='#'+objs[i].src;
}
}\

objs[i].onclick=function(){\
if(this.alt==''){\
document.location=\"myweb:imageClick:\"+this.src;\
}\
};\
};\
return imgUrlStr;\

};"; `

//用js獲取全部圖片
[wkWebViewevaluateJavaScript:jsGetImagescompletionHandler:^(idResult,NSError* error) { NSLog(@"js___Result==%@",Result); NSLog(@"js___Error -> %@", error); }]; NSString *js2=@"getImages()"; __blockNSArray*array=[NSArrayarray]; [wkWebViewevaluateJavaScript:js2completionHandler:^(idResult,NSError* error) { NSLog(@"js2__Result==%@",Result); NSLog(@"js2__Error -> %@", error); NSString*resurlt=[NSStringstringWithFormat:@"%@",Result]; if([resurlthasPrefix:@"#"]) { resurlt=[resurltsubstringFromIndex:1]; } NSLog(@"result===%@",resurlt); array=[resurlt componentsSeparatedByString:@"#"]; NSLog(@"array====%@",array); [wkWebViewsetMethod:array]; }]; returnarray; }

第三步:

在加載頁面導(dǎo)入頭文件,#import "WKWebView+HtmlImages.h"痛侍;#import "SDPhotoBrowser.h"http:// 圖片瀏覽器朝氓;然后實(shí)現(xiàn)wkWebView的代理方法。
// 頁面加載完成之后調(diào)用
` - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
//通過js獲取htlm中圖片url
[self.wkWebView getImageUrlByJS:webView];

} `

第四步:

` #pragma mark - WKNavigationDelegate

  • (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *URL = navigationAction.request.URL;
    NSString *scheme = [URL scheme];
    //前綴
    NSString *path = [navigationAction.request.URL.absoluteString stringByRemovingPercentEncoding];
    if ([scheme isEqualToString:@"myweb"]){
    if ([path hasPrefix:@"myweb:imageClick:"]){
    NSString *imageUrl = [path substringFromIndex:@"myweb:imageClick:".length];
    NSLog(@"image url------%@", imageUrl);
    NSArray *imgUrlArr=[self.wkWebView getImgUrlArray];
    if (imgUrlArr.count == 0) {
    NSMutableArray *tempArray = [[NSMutableArray alloc] init];
    [tempArray addObject:imageUrl];
    imgUrlArr = [tempArray copy];
    }
    NSInteger index=0;
    for (NSInteger i=0; i<[imgUrlArr count]; i++) {
    DLog(@"imgUrlArr == %@",imgUrlArr[i]);
    if([imageUrl isEqualToString:imgUrlArr[i]]) {
    index=i;
    SDPhotoBrowser *browser = [[SDPhotoBrowser alloc] init];
    browser.sourceImagesContainerView = self.view; // 原圖的父控件
    browser.imageCount = imgUrlArr.count; // 圖片總數(shù)
    browser.currentImageIndex = index;
    browser.delegate = self;
    [browser show];
    break;
    }
    }
    }
    }
    decisionHandler(WKNavigationActionPolicyAllow);
    } `
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末主届,一起剝皮案震驚了整個(gè)濱河市赵哲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌君丁,老刑警劉巖枫夺,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異绘闷,居然都是意外死亡橡庞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門印蔗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扒最,“玉大人,你說我怎么就攤上這事华嘹“扇ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長再菊。 經(jīng)常有香客問我爪喘,道長,這世上最難降的妖魔是什么纠拔? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任秉剑,我火速辦了婚禮,結(jié)果婚禮上稠诲,老公的妹妹穿的比我還像新娘侦鹏。我一直安慰自己,他們只是感情好臀叙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布略水。 她就那樣靜靜地躺著,像睡著了一般劝萤。 火紅的嫁衣襯著肌膚如雪渊涝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天床嫌,我揣著相機(jī)與錄音跨释,去河邊找鬼。 笑死厌处,一個(gè)胖子當(dāng)著我的面吹牛鳖谈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播阔涉,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼缆娃,長吁一口氣:“原來是場噩夢啊……” “哼蹲诀!你這毒婦竟也來了塔逃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對情侶失蹤阀趴,失蹤者是張志新(化名)和其女友劉穎凶伙,沒想到半個(gè)月后郭毕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡函荣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年显押,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片傻挂。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡乘碑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出金拒,到底是詐尸還是另有隱情兽肤,我是刑警寧澤套腹,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站资铡,受9級(jí)特大地震影響电禀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜笤休,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一尖飞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧店雅,春花似錦政基、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至窍奋,卻和暖如春荐健,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背费变。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國打工摧扇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挚歧。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像吁峻,于是被迫代替她去往敵國和親滑负。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

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