javascript - 如何从 Facebook Messenger 对话下载所有照片？ JavaScript Vanilla

Question

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

我正在尝试通过 Chrome 上的 JS 控制台来完成。 我发现当您在灯箱中打开照片时，滚动浏览所有照片(因此它们都加载到浏览器)，它们都在一个 div 中，它具有具有相同 className 和 href 属性的 anchor ，从而导致全分辨率照片.所以我想首先我会创建一个包含所有 URL 的表，然后弄清楚如何触发对所有 URL 的下载。

那是我不成功的尝试:

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

但这会导致错误:

VM883:2 Uncaught TypeError: document.getElementsByClassName(...).forEach is not a function at :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 is not a function

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

1. 创建一个 Polyfill
2. 再次使用您的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>