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

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

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

- (void)webViewDidFinishLoad:(UIWebView )webView {

[IDProgressHUD IDPlaceViewHideDirect:selfview];

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

static NSString const jsGetImages =

@"function getImages(){\

var objs = documentgetElementsByTagName(\"img\");\

var imgScr = '';\

for(var i=0;i<objslength;i++){\

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

};\

return imgScr;\

};";

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

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

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

if (mUrlArraycount >= 2) {

[mUrlArray removeLastObject];

}

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

//添加可点击js

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

var imgs=documentgetElementsByTagName('img');\

var length=imgslength;\

for(var i=0;i<length;i++){\

img=imgs[i];\

imgonclick=function(){\

windowlocationhref='image-preview:'+thissrc}\

}\

}"];

[mWebView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];

}

//在这个方法中捕获到的点击事件和被点击的url

- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType {

//预览

if ([requestURLscheme isEqualToString:@"image-preview"]) {

NSString path = [requestURLabsoluteString substringFromIndex:[@"image-preview:" length]];

path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

//path 就是被点击的url

return NO;

}

return YES;

}

在给标签绑定事件时在回调事件里有一个event参数,可以通过eventtarget获取当前对象,在处理函数里把当前对象当做参数传递过去。如:

//绑定事件

$('list')click(function(event){

    var ele=eventtarget;

    deal(ele);

});

//处理函数

function deal(obj){

    

}

只是举一个例子,如果有错误,请指出。

在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。

其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持

原始事件模型:

在原始事件模型中(也有说DOM0级),事件发生后没有传播的概念,没有事件流。北大青鸟认为事件发生,处理,结束,就这么简单。监听函数只是元素的一个属性值,通过指定元素的属性值来绑定监听器。书写方式有两种:

(1)HTML代码中指定属性值:

(2)在js代码中指定属性值:documentgetElementsByTagName(‘input’)[0]onclick=func

优点:所有浏览器都兼容

缺点:

1逻辑与显示没有分离

2相同事件的监听函数只能绑定一个,后绑定的会覆盖掉前面的

3无法通过事件的冒泡、委托等机制。

DOM2事件模型

此模型是W3C制定的标准模型。W3C制定的事件模型中,一次事件的发生包含三个过程:

(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数,若有则执行。

(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数

(3)事件冒泡阶段。事件从目标元素上升一直到达document,同样依次检查经过的节点是否注册了该事件的监听函数,有则执行。

所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。

etarget与ecurrentTarget是干什么的

etarget获取当前实际触发事件节点,ecurrentTarget获取获取当前监听节点。

11111

$('div')on('click',function(e){consolelog(ecurrentTarget);consolelog(etarget);})

如果点击span的输出:

li对象

span对象

点击li的非span区域,输出

li对象

li对象

preventDefault与stopPropagation是干什么的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401//EN" ";

效果如图:

以上就是关于如何通过js获取网页中所有图片并加入点击事件,实现全部的内容,包括:如何通过js获取网页中所有图片并加入点击事件,实现、js中如何通过单击事件获取当前对象,并传递、js代码事件机制识别等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9778072.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存