Javascript: element.click() in a loop
Question
I'm new to Javascript.
Currently, I want to download a few images from the website with Javascript, this is my tried:
$(document).ready(function() {
$('.indnt1').find('a').each(function() {
if($(this).attr('target') === "_blank") {
var image = this;
console.log(image);
image.click();
}
});
});
HTML structure:
<ul class="indnt1">
<li>
<a href="ht.tp://mysite.com/2021%20.jpg"
target="_blank">pic1.jpg</a>
<span class="textPanelFooter">(
271 KB
)</span>
</li>
<li>
<a href="ht.tp://mysite.com/2022%20.jpg"
target="_blank">pic2.jpg</a>
<span class="textPanelFooter">(
349 KB
)</span>
</li>
<li>
<a href="ht.tp://mysite.com/2024%20.jpg"
target="_blank">pic4.jpg</a>
<span class="textPanelFooter">(
319 KB
)</span>
</li>
<li>
<a href="ht.tp://mysite.com/2023%20.jpg"
target="_blank">pic3.jpg</a>
<span class="textPanelFooter">(
218 KB
)</span>
</li>
</ul>
Basically, This script is going to find the and download the image from it. But I don't know why my script is just able to download the first image, it cannot download multiple images as I expected.
Could someone help me out? And why it not work? Thank you.
3 answers
solution1
0 2020-04-24 05:00:34
Are you expecting the save as dialogue box to appear? Or to have the images automatically downloaded to a location?
Anyway, I tried this and I see the network traffic downloading images.
$('img').each(function(a, ing) {
var src = img.src;
var iframe = document.createElement("iframe");
iframe.src = src;
iframe.id = "frame";
document.body.appendChild(iframe);
});
Maybe this points you in the right direction. Hope this is helpful.
solution2
0 2020-04-24 05:59:55
Please try this.
var images = document.getElementsByTagName('img');
var srcList = [];
var i = 0;
setInterval(function(){
if(images.length > i){
srcList.push(images[i].src);
var link = document.createElement("a");
link.id=i;
link.download = images[i].src;
link.href = images[i].src;
link.click();
i++;
}
},1500);
solution3
0 2020-04-24 06:49:52
When you click image, an popup block show, you should allow popup option in browser.
I tried your code in local, it worked.
$(document).ready(function() { $('.indnt1').find('a').each(function() { if($(this).attr('target') === "_blank") { var image = this; console.log(image); image.click(); } }); });
<html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="indnt1"> <li> <a href="http://placehold.it/100x100" target="_blank">pic1</a> <span class="textPanelFooter">( 271 KB )</span> </li> <li> <a href="http://placehold.it/100x100" target="_blank">pic2</a> <span class="textPanelFooter">( 349 KB )</span> </li> <li> <a href="http://placehold.it/100x100" target="_blank">pic3</a> <span class="textPanelFooter">( 319 KB )</span> </li> <li> <a href="http://placehold.it/100x100" target="_blank">pic4</a> <span class="textPanelFooter">( 218 KB )</span> </li> </ul> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.