Как загрузить все фотографии из беседы в Facebook Messenger? Ванильный JavaScript

Мне трудно загрузить все фотографии из одного разговора в Messenger.

Я пытаюсь сделать это через консоль JS в Chrome. Я обнаружил, что когда вы открываете фотографии в лайтбоксе, прокручиваете их все (чтобы все они загружались в браузер), все они находятся в одном div, который имеет якоря с одним и тем же атрибутом className и href, ведущим к фотографии в полном разрешении. . Поэтому я подумал, что сначала я создам таблицу со всеми URL-адресами, а затем выясню, как запустить загрузку для всех из них.

это была моя неудачная попытка:

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

но это приводит к ошибке:

VM883:2 Uncaught 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);
});

что привело к массиву, полному неопределенных значений..


person Spoderman4    schedule 29.08.2018    source источник
comment
Вы знаете, что парсинг запрещен на Facebook, верно?   -  person luschn    schedule 30.08.2018
comment
и getElementsByTagName, и getElementsByClassName возвращают HTMLCollection. Следовательно, в вашем Array.prototype.forEach.call вам нужно снова вызвать это для getElementsByTagName   -  person gaetanoM    schedule 30.08.2018
comment
лющн: соскоб? Я пытаюсь получить около 700 фотографий из одного разговора, а не собирать террабайты. ;) кроме того, это все равно "мои" данные. @gaetanoM Не могли бы вы расширить свой ответ примером? Я знаю, что он возвращает HTMLCollection, но я действительно не знаю, как с ним работать.   -  person Spoderman4    schedule 30.08.2018
comment
Прямо не отвечая на ваш вопрос, но вы можете попробовать Messages Saver для Facebook, расширение Chrome, которое может загружать мультимедиа из чата Messenger chatsaver.org/files.html   -  person tube-builder    schedule 10.09.2018
comment
Не тот ответ, который я ищу, но спасибо :) Я знаю, что для этого есть плагины, но я настоятельно настаиваю на создании своего собственного. В прошлый раз, когда я пытался выполнить задачу, описанную выше, у меня постоянно вылетал браузер.   -  person Spoderman4    schedule 12.09.2018


Ответы (1)


Потому что вы получаете эту ошибку:

document.getElementsByClassName(...).forEach не является функцией

Это происходит потому, что getElementsByClassName и getElementsByTagName возвращают коллекцию HTMLCollection. В некоторых браузерах параметр forEach не определен. Следовательно, вы можете:

  1. создайте Polyfill
  2. снова используйте метод Array.prototype.forEach.call

Вы можете прочитать больше о HTMLCollection на MDN.

Пример:

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
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>

person gaetanoM    schedule 29.08.2018
comment
Это отличный ответ, спасибо. У меня есть массив URL-адресов, теперь мне нужно выяснить, как запустить загрузку для всех из них. - person Spoderman4; 30.08.2018