Проблема с написанием скрипта для (не своего) сайта.

206
02 октября 2017, 02:58

Не знаю, как лучше сформулировать вопрос, поэтому постараюсь объяснить на деле: нужно сделать скрипт, который в последствии будет автоматически заменять сжатую версию картинки HD версией. Для большинства интернет ресурсов это было сделать не сложно, даже с моим практически отсутствующим навыком программирования, но при попытке сделать такой скрипт для сайта DeviantArt, я мучаюсь уже несколько дней. То при сочетании "сначала открыть вкладку с картинкой, у которой нету HD версии, затем на той же вкладки открыть другую картинку с HD" возникали баги и ошибки, исправление которых уже раз 4 заставляло переписывать код по новой. То просто кретинизм, наступающий в результате отсутствии краткости таланта при написании кода. Картинку с кодом, приложу просто для осведомления, но вопрос заключается не совсем по моему коду.

Все мои проблемы с написанием этого кода возникли из-за особенности то ли конкретно DeviantArt, то ли из-за просто слишком малого опыта. Дело в том, что картинка (document.getElementsByClassName("dev-content-normal")) может находиться либо в [0], либо в [1]. При открытии абсолютно новой вкладки, она будет находиться по адресу document.getElementsByClassName("dev-content-normal")[0], при открытии следующей картинке, уже по [1]. Если с этим всё ещё не слишком сложно, то в случаи с адресом, по которому располагается HD версия, всё сложнее

Сложнее всё потому, что в зависимости от того, какую я открываю первую вкладку - с картинкой, у которой есть HD версия, или у которой её нету - появляется несколько вариантов комбинации. Были попытки и сбрасывать страницу через window.location.reload() и делать кучу проверок, но, вероятно, из-за владения малым количеством команд, которыми я пользуюсь, все варианты комбинаций пофиксить не получалось и в результате при какой-то комбинации возникал либо графический баг, либо бесконечный спам в консоли текстом типажа TypeError: Cannot read property 'href' of undefined. А после нужды добавить проверку формата контента, при котором код бы не работал на "не картинки", эффект с количеством возможных комбинаций и вытекающих из них ошибок увеличился просто до непосильных мне размеров. Мой вопрос по сути заключается в том, как мне избавится от сложности со всеми этими комбинациями, к примеру, за счёт исключения появления [1].

Я понимаю, что мои запросы скорее актуальны для сайтов с фрилансом, и просто беспокоить мне излишне своей проблемой никого не хотелось, но уже столько времени и сил на эту цель потрачено, что может, больше успехов будет, если мне помогут знающие люди.

Прошу прощение за такие излишние подробности и замудрённости, вероятно, в связи с этими постоянными безуспешными попытками просто наступила умственная усталость.

Answer 1

По первой части - про разные ключи в массиве, ну на сайте просто два элемента текущий и предыдущий, что бы не думать об этом, просто всегда берите последний элемент:

var arrImages = document.getElementsByClassName("dev-content-normal");
var image = arrImages[arrImages.length-1];
console.log(image.src)

Теперь при первом открытии у вас в массиве будет всего один элемент по ключу 0, и вы его получите (он один он последний), когда дальше перейдете, у вас в массиве элементов будет два значения, и текущий по ключу 1 (и он же последний).

По второй части - после получения тега изображения, получаете id и ищите кнопку для скачивания:

var arrImages = document.getElementsByClassName("dev-content-normal");
var image = arrImages[arrImages.length-1];
var id = image.getAttribute('data-embed-id');
var download = document.querySelector('.dev-page-download[data-deviationid="'+id+'"]');
console.log(download.href);
Answer 2

(Вопрос был опубликован при отсутствии аккаунта, за счёт указания почты. По итогу, конечная регистрация по ссылке, пришедшей на почту, создала новый аккаунт (этот), по-скольку на "старый" зайти теперь невозможно, отпишу с этого)

Хотелось бы от всей души поблагодарить Bookin, помощь действительно оказалась существенной и помогла решить мою проблему. Искреннее спасибо!

Пока что проблем при выполнении кода обнаружено не было, получился код в итоге такой:

window.onload=function(){
var arrImages = document.getElementsByClassName("dev-content-normal");
var image = arrImages[arrImages.length-1];
var arrImagesFull = document.getElementsByClassName("dev-content-full");
var imageFull = arrImagesFull[arrImagesFull.length-1];
    if(image == null) {
    } else {
    var id = image.getAttribute('data-embed-id');
    }
var download = document.querySelector('.dev-page-download[data-deviationid="'+id+'"]');
    if(download == null) {
    var format = download;
    } else {
    var format = download.href.split(".").pop().split("?")[0];
    }
};
    setInterval(function (){
    arrImages = document.getElementsByClassName("dev-content-normal");
    image = arrImages[arrImages.length-1];
    arrImagesFull = document.getElementsByClassName("dev-content-full");
    imageFull = arrImagesFull[arrImagesFull.length-1];
        if(image == null) {
        } else {
        var id = image.getAttribute('data-embed-id');
        }
    download = document.querySelector('.dev-page-download[data-deviationid="'+id+'"]');
        if(download == null) {
        format = download;
        } else {
        format = download.href.split(".").pop().split("?")[0];
        }
            if(format == "jpg" || format == "jpeg" || format == "png" || format == "gif" || format == "bmp" || format == "ico" || format == "tiff" || format == "jp2") {
                if(download == null) {
                    if(imageFull == null) {
                    } else {
                    image.src = imageFull.src;
                    }
                } else {
                image.src = download.href;
                    if(imageFull == null) {
                    } else {
                    imageFull.src = download.href;
                    }
                }
            } else {
                if(imageFull == null) {
                } else {
                image.src = imageFull.src;
                }
            }
    }, 500);
READ ALSO
Как создать get и set в функции-конструкторе?

Как создать get и set в функции-конструкторе?

Обычно в объектах get или set объявляют так:

225
Как “сбросить” ненужные стили?

Как “сбросить” ненужные стили?

Делаю встраиваемый js виджет, и проблема заключается в том, что стили страницы, на которую помещается js код, частично меняют внешний вид виджета

223
Ошибки в консоли (JS)

Ошибки в консоли (JS)

Здравствуйте, если кому-то не жалко времени помогите) Вылетают ошибки в консоль, что они означают понятно(вроде), а как исправить не приходит...

190
Помогите довести до ума (JSON->CalendarView)

Помогите довести до ума (JSON->CalendarView)

В MySql Хранится дата minDate(20/01/2017) и maxDate(20/02/2017)Эти даты необходимо получить в приложение и записать в соответствующие места CalendarView

267