Тема: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Привіт. Є сторінка https://www.pinterest.com/Monokumagirl/anime-girls/
а на ній купа картинок. Ви можете бачити лише якусь частину усіх картинок, це видно по скролбару.
Якщо ми скролимо вниз, то підвантажуються ще декілька картинок, і так до кінця.
Я б хтів завантажити усі ці картинки, і для цього спробував метод, що використовує API цього сайта, але він повертає лише перші 50 картинок, а мені потрібні всі. Тому я вирішив написати Userscript, котрий би показував мені посилання на усі картинки, що містяться на сторінці.
Ідея була така - пишу скрипт, от такий

$(document).ready(function() {    
    var $input = $('<input type="button" value="new button"/>');
    $input.appendTo($("body"));

    $input.click(function(){
        
        var $images = $(".pinImg");
        
        console.log($images.length);
        
        var str = "";
        
        $images.each(function(){
            str+=($(this).attr("src"))+"\n";
        });
        
        
        var $div  = $("<div>"+str+"</div>");
        $div.appendTo($("body"));
        
    });
    
});

Далі я прокручую сторінку до самого низу, аби завантажились усі картинки, після чого натискаю на кнопку, котра активує функцію, що знаходить усі посилання на сторінці і показує їх.
Але воно не працює! Кожного разу показується лише якась частина посилань, від 30 до 40, хоча їх там має бути біля тисячі.
Чому це відбувається? Як завантажити усі картинки? Зараз в мене є лише одна ідея - прокручувати потрошки сторінку і натискати на кнопку, котра б додавала посилання на картинки, що видніються, в коллекцію, звісно, з перевіркою на унікальність. Але це буде якось довго і нудно, до того ж в мене ніяк не виходить розмістити кнопку відносно вікна браузера.

Подякували: 221VOLT1

2

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Headless бравзер вам в руки, осьо приклад

Подякували: 221VOLT1

3

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Ще можна спробувати проаналізувати що воно AJAX відравляє і що отримує і самому надсилати HTTP запити.

Подякували: 221VOLT1

4

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Та я вже по хорткору написав те, про що відразу подумав

$(document).ready(function() {    
    var $input = $('<input type="button" value="new button"/>');
    $input.insertBefore($("body"));

    $input.click(function(){
        var added=0;
        var str = "";

        var intervalFunc = setInterval(function(){
            var $images = $(".pinImg");

            var isEnd=0;
            var lastAdded=0;
            
            console.log($images.length);
            
            $images.each(function(){
                var s = ($(this).attr("src"));
                
                lastAdded=added;
                
                if(!str.indexOf(s) > -1){
                    str+=(s+"\n");
                    added++;
                }
                
                if(lastAdded==added)
                {
                    isEnd++;
                    if(isEnd==3)
                    {
                        clearInterval(intervalFunc);
                    }
                }
                else  
                {
                    lastAdded=added;
                }
            });

            $("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

            console.log("added "+added);
            
        }, 1500);
                
        var $div  = $("<div>"+str+"</div>");
        $div.appendTo($("body"));        
        
    });
    
});

Є лишень одна біда - воно не зупиняється. Виглядає так, наче indexOf не працює.

Подякували: 221VOLT1

5

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Ну, написав свого indexOf'а і наче працює, зтягнув 900+ посилань, зара буду завантажувати 900+ картинок

Прихований текст

http://orig07.deviantart.net/2c43/f/2011/031/d/c/very_happy_face_by_zero78o-d38iw7i.jpg

Подякували: 221VOLT1

6

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

підказки програмістів вище вірні,

втім я зробив би це іншим шляхом ---
при обробці\зберіганні уже завантажених зображень - видаляти з dom блоки з цими зображеннями,
таким чином буде відбуватися і прокрутка вниз із завантаженням нових зображень)
і можливо трошки оперативки звільниться)

Подякували: 0xDADA11C71

7 Востаннє редагувалося koala (24.12.2015 10:07:10)

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Оцей фрагмент:

                lastAdded=added;
                
                if(!str.indexOf(s) > -1){//умова, за якої змінюється added
                    str+=(s+"\n");
                    added++;
                }
                
                if(lastAdded==added)//перевірка, чи не було зміни added
                {
                    isEnd++;
                    if(isEnd==3)
                    {
                        clearInterval(intervalFunc);
                    }
                }
                else  
                {
                    lastAdded=added;
                }

Прокоментовані рядки перевіряють одне й те саме (якщо перше вірно, то воно робить хибним друге і навпаки), а отже, їх можна об'єднати:

                lastAdded=added;
                
                if(!str.indexOf(s) > -1){
                    str+=(s+"\n");
                    added++;
                    lastAdded=added; //колишній вміст else
                }
                else
                {
                    isEnd++;
                    if(isEnd==3)
                    {
                        clearInterval(intervalFunc);
                    }
                }

А тепер ми бачимо, що lastAdded непотрібен взагалі:

                if(!str.indexOf(s) > -1){
                    str+=(s+"\n");
                    added++;
                }
                else
                {
                    isEnd++;
                    if(isEnd==3)
                    {
                        clearInterval(intervalFunc);
                    }
                }

Далі - isEnd тільки відраховує ітерації. Нащо йому два значення - 0 і 3?

var times = 3;
...
                if(!str.indexOf(s) > -1){
                    str+=(s+"\n");
                    added++;
                }
                else
                {
                    if( --times )
                    {
                        clearInterval(intervalFunc);
                    }
                }

Наступна проблема - пошук в рядку повільніший, ніж по масиву, та й щось він у вас не працює. Виправляємо:

var str = [];
var times = 3;
...
                if( !$.inArray(s,str)){
                    str.push(s);//added тепер - просто str.length
                }
                else if( --times ) {
                    clearInterval(intervalFunc);
                }
...
... str.join("\n"); ...

Так краще?

Подякували: 0xDADA11C7, 221VOLT2

8

Re: Як дістати HTML-розмітку всієї сторінки, якщо вона динамічна?

Я б прогорнув до самого низу,викликав
document.body.innerHTML
І відразу дістав би всі зображення. А бо ж з конкретного div id'у діставав би,залежить куди зображення підвантажуються.

Подякували: 0xDADA11C7, 221VOLT2