Как запустить скрипт при переходе на страницу?

Question

[Стас Вохмянин]

Добрый день!

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

Подскажите в каком направлении двигаться? Как запустить выполнение скрипта при переходе? Есть мысль через if, чтобы скрипт при загрузке сравнивал адресную строку, и в случае, если все ок, запускал скрипт для выборки нужных элементов.
Только начинаю разбираться в JS, не серчайте, если сумбурно объяснил, можно просто ткнуть, какую функцию для выполнения рассмотреть, а дальше сам попробую дойти.

Comments

[Simkav]

Вам нужно запускать скрипт при открытии страницы или что, не совсем понятно

[Стас Вохмянин]

Simkav, у меня вот такой код, при нажатии на ссылку, он скрывает элементы не из этого класса,

let stylepics = document.getElementById('styleid');
        let classes = ['gr', 'pg', 'pr', 'web']
        for (var j = 0; j < classes.length; j++) {
        var stylefunc = document.getElementsByClassName(classes[j]);
        for (var i = 0; i < stylefunc.length; i++) {
            stylefunc[i].classList.add("hidden");
        }
}
stylepics.addEventListener('click', stylefunc);

На главной все работает ок, а вот если я нажму на ссылку с другой страницы, то он сделает переход на главную, но скрипт не запустит. Может ли быть дело в порядке кода? Т.е. скрипт на самом деле выполняется, но до того, как будет выполнена отрисовка страницы и поэтому не дает результат?

[Simkav]

Стас Вохмянин, Ну если я правильно понял вам нужно написать скрипт который будет отрабатывать при заходе на страницу, для этого есть такая штука DomContentLoaded и hash
P.s. Надеюсь я правильно понял))

[Стас Вохмянин]

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

[Simkav]

Стас Вохмянин, ну те две ссылки что я вам дал, как раз для этого, первой вы вешаете обработчик на евент прогрузки страницы , и в нем проверяете есть ли hash и если есть то дальше делаете свои дела

[Стас Вохмянин]

Simkav, спасибо, как раз уже иду в этом направлении. Примерно так и предполагал изначально, но не знал, какими операторами воспользоваться

[Стас Вохмянин]

Simkav, сделать отображение нужных элементов при загрузке страницы через DomContentLoaded получилось, однако теперь перестала работать команда
stylepics.addEventListener('click', stylefunc);
которая отображает элементы по клику. Как можно попробовать исправить?

[Simkav]

Стас Вохмянин, надо понять почему перстала работать, ошибки есть?
P.s
Сейчас открыл сайт и увидел что у вас на странице сейчас вообще нет этого обработчика, как он будет работать)

[Стас Вохмянин]

Simkav, сначала была ошибка, потому что обработчик по клику возвращал значение null, сейчас все заработало. Огромное спасибо за помощь!

[Simkav]

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

[Стас Вохмянин]

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

Answer 1

[Стас Вохмянин]

Решил следующим образом:

let hashes = window.location.hash;
document.addEventListener('DOMContentLoaded', function() {
        if (hashes == '#style') {
            stylefunc();
        } else if (hashes == '#presentation') {
            prfunction();            
        } else if (hashes == '#polygraphy') {
            pgfunction();
        } else if (hashes == '#web'){
            webfunction();
        } else if (hashes == '#graphics'){
            grfunction();
        } else {
            projectsfunction();
        }
    });