Question

我很难从Messenger上的一次对话中下载所有照片。

我正在尝试通过Chrome上的JS控制台进行操作。我发现，当您在灯箱中打开照片时，滚动浏览所有照片（以便将它们全部加载到浏览器中），它们全部位于一个div中，并且其锚点具有相同的className和href属性，从而生成完整的分辨率照片。因此，我想首先创建一个包含所有URL的表，然后确定如何触发所有URL的下载。

那是我失败的尝试：

var anchors = [];
document.getElementsByClassName('_42rl').forEach(function(value, index, ar) {
anchors.push(ar[index].href);
});

但这会导致错误：

VM883：2未捕获的TypeError：document.getElementsByClassName（...）。forEach不是函数在：2：42

所以我尝试了这个：

var base = document.getElementsByClassName('_42rl');
var list = [];

Array.prototype.forEach.call(base, function(element, index, array){
    list.push(element.getElementsByTagName('a').href);
});

这导致数组充满未定义的值。

Answer 1

因为出现此错误：

document.getElementsByClassName（...）。forEach不是函数

发生这种情况是因为getElementsByClassName和getElementsByTagName返回HTMLCollection集合。在某些浏览器中，forEach未定义。因此，您可以：

创建一个Polyfill
再次使用您的 Array.prototype.forEach.call 方法

您可以在MDN上了解有关HTMLCollection的更多信息

一个例子：

var base = document.getElementsByClassName('_42rl');
var list = [];
Array.prototype.forEach.call(base, function(element, index, array){
    Array.prototype.forEach.call(element.getElementsByTagName('a'), function(ele, idx) {
        list.push(ele.href);
    });
});
console.log(list);

<div class="_42rl"><a href="11">Anchor 11</a><a href="12">Anchor 12</a></div>
<div class="_42rl"><a href="2">Anchor 2</a></div>
<div class="_42rl"><a href="3">Anchor 3</a></div>
<div class="_42rl"><a href="4">Anchor 4</a></div>

使用Polyfill：

// Polyfill
if (typeof NodeList.prototype.forEach === "undefined") {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

if (typeof HTMLCollection.prototype.forEach === "undefined") {
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

// your code....
var list = [];
document.getElementsByClassName('_42rl').forEach(function(element, index, array) {
    element.getElementsByTagName('a').forEach(function(ele, idx) {
        list.push(ele.href);
    });
});
console.log(list);

<div class="_42rl"><a href="11">Anchor 11</a><a href="12">Anchor 12</a></div>
<div class="_42rl"><a href="2">Anchor 2</a></div>
<div class="_42rl"><a href="3">Anchor 3</a></div>
<div class="_42rl"><a href="4">Anchor 4</a></div>

如何从Facebook Messenger对话中下载所有照片？ JavaScript香草

1 个答案: