Как обновлять url в адресной строке или что делать?

Question

[Saboteur]

Глупый вопрос.
Решил сделать простенький сайт, без ссылок. При клике в меню просто обновляется main блок, либо просто вписывается готовый текст, либо через ajax подгружается.

Проблема в том, что ссылка в браузере естественно не меняется и скопировать ее и кинуть кому-то - он естественно получит ссылку на начало, а не на "подменю".

Какой вообще подход правильно рулит - я не уверен, что я могу из JS подменить ссылку в адресной строке.
Но как тогда выходить из ситуации? Создавать кнопку "скопировать ссылку" на каждой страничке мне кажется не самым правильным вариантом.

Comments

[SVM]

да никак
а ты уверен что тебе это нужно?
это сработает только на статике,
но таких сайтов уже нет
(ты конечно можешь перелопатить свой сайт, но в чём плюшки?
если он у тебя вечный (контент не меняется

[Saboteur]

именно свой домашний сайт делал, 5 страниц, загнял весь контент в переменные и просто переприсваивал в main диве значение =)
удобно, весь сайт один index.html 20 кб
Но пришлось переразбить, чтобы удобно было кидать ссылки на отдельные странички.

Ну и интерес просто в технологии, как это грамотно сделать

[SVM]

если ты его не меняешь
создай html странички, зачем тебе даже нужен пых?

[Saboteur]

а у меня нет пыха, у меня html и js

[SVM]

тебе сайт нужен?
или просто тренируешься ?
я ради интереса ставил и джумлу и дле и ворпресс
джумла = самая крутая из безплатных

[SVM]

да
есть вот это = обрати внимание =это вещь
maxisiite https://max-3000.com/

[Saboteur]

Тренируюсь, но я не планирую быть разработчиком =)

Джумла довольно древнее говно мамонта.
Я его специально удалили сайт переписал, сохранив дизайн практически 1 в 1.
Было пару мегабайт + mysql + привязка к древней версии php

стало ~50 кбайт, без привязки к версии php и без привязки к mysl
правда сейчас sqlite юзаю для счетчика, но это отдельный некритичный функционал.

Перевозить именно этот сайт на wordpress не хочу, это домашняя тренировочная фигня с разной ностальгией.

[SVM]

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

[Saboteur]

Ну кодовая база вроде как давно не обновлялась. Решил обновить версию PHP наткнулся на кучу ошибок. Начал исправлять, потом подумал - у меня там 7 страничек всего, зачем для этого держать движок.
Переписал за два вечера, еще и дизайн темы сохранил практически 1 в 1 (с тенями не стал заморачиваться).
Ну вот что сейчас - saboteur.com.ua

Но это я уже убрал все onclick, и сделал ссылками.
А так, раньше хранил все семь страничек прямо в переменных, и был один index.html, пару png и текстовые файлики в юморе.

[Saboteur]

если он у тебя вечный (контент не меняется

Контент может генериться автоматом, из внешних источников, джумлу в этом плане ковырять долго и сложно

Answer 1

[Александр]

Если Вы хотите сделать что-то похожее на SPA (Single Page Application), то для начала Вам надо научить сервер отдавать всегда index.html. Следующий шаг - History API, это пригодится для подмены URL и генерации Ваших ссылок. А для того чтобы загрузить необходимое содержимое необходимо будет проанализировать location.pathname и отобразить необходимую информацию (как будто Вы нажали на элемент меню).
Второй вариант попроще - использовать location.hash для хранения уникального URL, загружать будете также как в первом варианте.

Comments

[Saboteur]

Я уже делал приложение, и все работало.

Было просто банально - на элемент меню вешаешь onclick('change_content("page1"))
в функции change_content банально менял содержимое основного блока через target.innerHTML="blablabla".
Нужный контент либо сразу был в наличии в какой-то переменной, либо подгружался через ajax

Суть в том, что при onclick у меня не менялась строка браузера, и простой способ - скопировать адресную строку и кому-то кинуть, не работал.
Сперва сделал отдельную кнопочку типа "copy url", которая генерировала ссылку уже с нужной переменной. Но возможно есть способ менять сразу саму адресную строку в браузере, без перегрузки странички.

[Александр]

Saboteur, History API.

[Saboteur]

function show_article()
{
    const url = new URL(location.href);
    url.searchParams.set('page', 'blablabla');
    history.pushState(null, document.title, url);
}

Отлично работает, то что нужно!

[lUser L]

Saboteur,



Если нажать на эту кнопку, то url меняется обратно, но контент - нет, так или нет ?

[Saboteur]

Эмиль 🔥, ну для меня это неважно ). Но так и должно быть, я же не хожу по разным страничкам, а по одному "приложению"

[lUser L]

Saboteur, я как-то делал подобное и столкнулся с проблемой о которой написал выше. Решил просто и возможно костыльно, функция отлавливала изменение url, получала его, и аяксила его. Соответственно, когда нажимал "назад", то контент менялся обратно.

[Александр]

Эмиль 🔥, popstate event.

[lUser L]

Александр, да, тогда я об этом не знал, просто поделился своим не удачным опытом

Answer 2

[Nik Faraday]

Ответить на ваш вопрос может следующий фрагмент кода (моё творение):

window.updateColours = () => {
    const colours = document.querySelectorAll('[data-href]')
    colours.forEach(colour => {
        const href = $(colour).data('href')
        const hrefParts = href.split('/')
        const id = hrefParts[hrefParts.length - 1]

        // ...

        $(colour).on('click', () => {
            history.replaceState(null, '', href) // pay attention here
            
            // ...

            $.ajax({
                url: ...,
                method: 'get',
                success: (response) => { ... },
                error: (response) => { ... }
            })
        })
    })
}

В этом коде data-href это кастомный аттрибут, в котором я сохраняю данные, которые мне нужны в дальнейшем для обработки

Очень важно обратить внимание на строчку кода:

history.replaceState(null, '', href)

Это позволит вам изменять url без перезагрузки страницы и подгружать необходимые данные

Comments

[Saboteur]

Там разобрали в комментариях к другому ответу.
Я юзал

function show_article()
{
const url = new URL(location.href);
url.searchParams.set('page', 'blablabla');
history.pushState(null, document.title, url);
}