Измените URL в браузере, не загружая новую страницу с помощью JavaScript

Question

Как бы у меня было действие JavaScript , которое может оказать некоторое влияние на текущую страницу, но также изменить URL-адрес в браузере, поэтому, если пользователь нажимает перезагрузить или добавить в закладки новый URL-адрес?

Было бы также неплохо, если бы кнопка «Назад» перезагрузила бы исходный URL.

Я пытаюсь записать состояние JavaScript в URL.

Answer 1

мой код:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

и действие:

setLocation('http://example.com/your-url-here');

и пример

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Вот и все:)

Answer 2

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

Так, скажем, пользователь на странице: http://domain.com/site/page.html Тогда браузер может позволить мне сделать location.append = new.html и страница становится: http://domain.com/site/page.htmlnew.html и браузер не меняет ее.

Или просто позволить человеку изменить параметр get, поэтому давайте location.get = me=1&page=1.

Таким образом, исходная страница становится http://domain.com/site/page.html?me=1&page=1 и не обновляется.

Проблема с # заключается в том, что данные не кэшируются (по крайней мере, я так не думаю) при изменении хэша. Таким образом, каждый раз, когда загружается новая страница, все равно, что кнопки назад и вперед на странице, отличной от Ajax , могут кэшировать данные и не тратить время на их повторную загрузку. *

Из того, что я увидел, история Yahoo уже загружает все данные одновременно. Кажется, он не выполняет никаких запросов Ajax. Поэтому, когда div используется для обработки разных методов сверхурочно, эти данные не сохраняются для каждого состояния истории.

Answer 3

Более простой ответ, который я представляю,

window.history.pushState(null, null, "/abc")

это добавит /abc после имени домена в URL браузера. Просто скопируйте этот код и вставьте его в консоль браузера и увидите, что URL-адрес меняется на "https://stackoverflow.com/abc"

Answer 4

У меня был успех с:

location.hash="myValue";

Это просто добавляет #myValue к текущему URL. Если вам нужно вызвать событие на странице загрузки, вы можете использовать тот же location.hash, чтобы проверить соответствующее значение. Просто не забудьте удалить # из значения, возвращенного location.hash, например,

var articleId = window.location.hash.replace("#","");