使用Javascript一次下载多个图像

我试图在chrome扩展中使用javascript一次下载多个图像。我希望通过点击每个图像（每个图像都包装在带有下载属性的href标签中，以及类“clickit”）来实现这一点。我们的想法是使用clickit类循环遍历每个href，然后单击鼠标，从而下载图像

下面的代码只下载n=25个图像中的第一个，但是调用了25次（控制台日志“got here”多次）

我尝试过另一种方法，但这段代码几乎立即使chrome崩溃（在日志中抛出KERN_PROTECTION_FAILURE）：

for（var i=0；i

在这两种情况下，我都有一种感觉，就是我不正确地使用了dispatchEvent（）函数，但我不能对此指手画脚。在第一种情况下，正确地检索单个图像是令人鼓舞的。我有一种感觉，在第二种情况下，我陷入了糟糕的内存访问领域

---

有什么想法吗？

我不知道你的代码可能有什么问题（可能是已经被弃用的事实），但我能够加载大约90个IMG，而chrome根本不会对此抱怨（它可能会问你一次是否允许该网页下载多个图像，但仅此而已）。
示例代码：

/* Download an img */
function download(img) {
    var link = document.createElement("a");
    link.href = img.src;
    link.download = true;
    link.style.display = "none";
    var evt = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": true
    });

    document.body.appendChild(link);
    link.dispatchEvent(evt);
    document.body.removeChild(link);
    console.log("Downloading...");
}

/* Download all images in 'imgs'. 
 * Optionaly filter them by extension (e.g. "jpg") and/or 
 * download the 'limit' first only  */
function downloadAll(imgs, ext, limit) {
    /* If specified, filter images by extension */
    if (ext) {
        ext = "." + ext;
        imgs = [].slice.call(imgs).filter(function(img) {
            var src = img.src;
            return (src && (src.indexOf(ext, src.length - ext.length) !== -1));
        });
    }

    /* Determine the number of images to download */
    limit = (limit && (0 <= limit) && (limit <= imgs.length))
            ? limit : imgs.length;

    /* (Try to) download the images */
    for (var i = 0; i < limit; i++) {
        var img = imgs[i];
        console.log("IMG: " + img.src + " (", img, ")");
        download(img);
    }
}

然后，单击顶部左侧的按钮，您将看到一大堆图像：）

---

（注意：您的下载文件夹将充满90个图像。如果您愿意，请修改

downloadAll（）

的“limit”参数以限制它们。）

您不需要chrome扩展，您可以在控制台中运行此功能或制作书签：

images=document.querySelectorAll("img"); for (i of images) { var a = document.createElement('a'); a.href = i.src; console.log(i); a.download = i.src; document.body.appendChild(a); a.click(); document.body.removeChild(a);}

同样的东西被美化为阅读：

images = document.querySelectorAll("img");
for (i of images) {
    var a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

---

Eduard的答案在我使用Chrome、Firefox或Safari之前都不适用，除非我将其包装在setInterval（）中。间隔500次对我来说很有效。少一点可能管用，但我认为应该有一个安全边际。虽然我可以看出，如果图像计数很高的话，这可能会增加多少

var i = 0;

var id = setInterval( function() {

    if ( i >= images.length ) {
       clearInterval( id );
       return;
    }

   var image = images[i++];
   i++;
   var a = document.createElement('a');
   console.log( image )
   a.href = image.src
   a.download = image.src
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);

}

---

用户界面线程中有25个同时发生的事件。可能只是Chrome在说wtf！！！。尝试在setTimeout中包装dispatchEvent以给Chrome一个机会。不完全是要求的，但通常对用户来说可能会更好，因为只有文件会被下载。我对您的代码进行了一些修改，以适应内容脚本，并且一切都很好。非常感谢你的帮助！不！你修改了它？你没注意到版权声明吗？哦，我一定是在复制/粘贴时忘了这一点。。。总是乐于助人：虽然PDOES在firefox中不起作用！版本-Mac 45.1.1它只打开页面上的最后一个图像。有什么解决办法吗？在chrome上下载最后一张图片对我不起作用。不知道我错过了什么我很难做到这一点，它只会打开一个图像。也许它可以下载多少图像有某种限制。感谢您的改进，并提供了一个替代方案，向上投票

images=document.querySelectorAll("img"); for (i of images) { var a = document.createElement('a'); a.href = i.src; console.log(i); a.download = i.src; document.body.appendChild(a); a.click(); document.body.removeChild(a);}

images = document.querySelectorAll("img");
for (i of images) {
    var a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

var i = 0;

var id = setInterval( function() {

    if ( i >= images.length ) {
       clearInterval( id );
       return;
    }

   var image = images[i++];
   i++;
   var a = document.createElement('a');
   console.log( image )
   a.href = image.src
   a.download = image.src
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);

}