如何通过js获取网页中所有图片并加入点击事件,实现

JavaScript09

如何通过js获取网页中所有图片并加入点击事件,实现,第1张

在网页加载完成时,通过js获取图片和添加点击的识别方式

- (void)webViewDidFinishLoad:(UIWebView *)webView {

[IDProgressHUD IDPlaceViewHideDirect:self.view]

//这里是js,主要目的实现对url的获取

static NSString * const jsGetImages =

@"function getImages(){\

var objs = document.getElementsByTagName(\"img\")\

var imgScr = ''\

for(var i=0i<objs.lengthi++){\

imgScr = imgScr + objs[i].src + '+'\

}\

return imgScr\

}"

[webView stringByEvaluatingJavaScriptFromString:jsGetImages]//注入js方法

NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"]

mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]]

if (mUrlArray.count >= 2) {

[mUrlArray removeLastObject]

}

//urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组

//添加图片可点击js

[mWebView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\

var imgs=document.getElementsByTagName('img')\

var length=imgs.length\

for(var i=0i<lengthi++){\

img=imgs[i]\

img.onclick=function(){\

window.location.href='image-preview:'+this.src}\

}\

}"]

[mWebView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction()"]

}

//在这个方法中捕获到图片的点击事件和被点击图片的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 就是被点击图片的url

return NO

}

return YES

}

方法一:获取图片的宽高。可以用offsetWidth和offsetHeight

方法二:

你先获取img标签标签元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。

获取之后,如果你的img图片有width和height 属性,可以直接用img元素对象点属性

document.getElementsByTagName("img")[0].width

document.getElementsByTagName("img")[0].height

3.如果img元素本身没有width和height属性。你可以获取img元素的style样式

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]

};

obj是你的img标签对象,attr是你的想要获取的属性;

currentStyle支持IE低版本浏览器,

getComputedStyle支持主流浏览器