我试图在 chrome 扩展程序中使用 javascript 一次下载多张图片。我想通过点击每个图像(每个图像都包含在一个带有下载属性的 href 标签和类“clickit”中)来做到这一点。这个想法是用 clickit 类循环遍历每个 href 并触发鼠标点击，从而下载图像。

以下代码仅下载 n = 25 张图像中的第一张，但被调用了 25 次(控制台记录“到达此处”多次)。

var evt = document.createEvent("MouseEvents");

evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);

[].forEach.call( document.getElementsByClassName("clickit"), function(elem){
  console.log("got here");
  elem.dispatchEvent(evt);
});

我尝试了另一种方法，但这段代码几乎立即使 chrome 崩溃(在日志中抛出 KERN_PROTECTION_FAILURE):

for (var i = 0; i < document.getElementsByClassName("clickit").length; i++){  
    var clickEvent = document.createEvent("MouseEvents");
    clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    document.getElementsByClassName("clickit")[i].dispatchEvent(clickEvent);
}

在这两种情况下，我都觉得我没有正确使用 dispatchEvent() 函数，但我无法确定。在第一种情况下，正确检索单个图像是令人鼓舞的。对于第二种情况，我感觉自己陷入了错误的内存访问区域。

有什么想法吗？

最佳答案

我不知道您的代码可能有什么问题(也许是 document.createEvent() 已被弃用)，但我能够下载大约 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);
    }
}

作为演示，你可以去这个 FreeImages.co.uk Gallery ，打开控制台并粘贴上面的代码，以及以下内容:

/* Callback for button's "click" event */
function doit() {
    var imgs = document.querySelectorAll("img");
    downloadAll(imgs, "jpg", -1);
}

/* Create and add a "download" button on the top, left corner */
function addDownloadBtn() {
    var btn = document.createElement("button");
    btn.innerText = "Download all images";
    btn.addEventListener("click", doit);
    btn.style.position = "fixed";
    btn.style.top = btn.style.left = "0px";
    document.body.appendChild(btn);
}
addDownloadBtn();

然后，点击左上角的按钮，您会得到一大堆图片:)
(注意:您的下载文件夹将充满 90 张图片。如果您愿意，可以修改 downloadAll() 的“limit”参数来限制它们。)

关于javascript - 使用 Javascript 一次下载多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19830088/