Выполнение скрипта изменения
страницы после перехода по ссылке

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

В рамках одной страницы сделать это не проблема (через закрытие и отображение стилей):

<div id="old" class="flex">
    содержание
</div>

<div id="new" class="flex_new" style="display: none">
    содержание
</div>

<a href="#" class="link" onclick="newDivHere()">Смена стиля</a>

function newDivHere() {
    document.getElementById("old").style.display="none";
    document.getElementById("new").style.display="flex";
}

И это работает, если я нахожусь на данной странице.

Но как перекроить скрипт, чтобы при заходе на эту страницу (используя кнопку перехода), осуществлялась смена стиля?

<a href="<?php echo $link; ?>" class="link" onclick="newDivHere()">Смена стиля</a>

При таком варианте, разумеется, сначала меняется стиль, после осуществляется переход.

Задача: сделать наоборот - переход -> смена стиля.


Ответы (1 шт):

Автор решения: Crus

Добавь к ссылке параметр

<a href="<?php echo $link; ?>?newstyle=true" class="link">Смена стиля</a>

И при загрузке новой странице проверяй наличие параметра в урле, после чего выполняй скрипт.

let url = new URL(window.location.href);

if (url.searchParams.get('newstyle')) {
    document.getElementById("oldDiv").style.display="none";
    document.getElementById("newDiv").style.display="flex";
};

То же самое можно сделать через hash в url

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

→ Ссылка