Как изменить URL-адрес без перезагрузки страницы?

avatar
Robin Rodricks
5 мая 2009 в 10:54
1707129
20
2730

Есть ли способ изменить URL-адрес текущей страницы без перезагрузки страницы?

Я хотел бы получить доступ к части перед хешем #, если это возможно.

Мне нужно изменить только часть после домена, поэтому я не нарушаю междоменные политики.

 window.location.href="www.mysite.com/page2.php";  // Sadly this reloads
Источник
Spidey
19 апреля 2012 в 17:59
166

Чтобы облегчить понимание вопроса, вот что делает Facebook, например, когда вы открываете фотографию. Панель URL-адреса изменится и будет указывать НАПРЯМУЮ на эту фотографию, поэтому вы можете поделиться URL-адресом, не теряя того, где вы находитесь на сайте. Помните сайты, основанные на фрейминге за последнее десятилетие? Вы могли получить только URL-адрес домашней страницы, потому что менялись только внутренние фреймы. И это было ужасно.

Doin
14 марта 2020 в 06:37
6

Хотя history.pushState() здесь, вероятно, правильный ответ, в этой ситуации (в зависимости от точных обстоятельств ...) вы, возможно, захотите рассмотреть возможность использования перенаправления на стороне сервера (например, с помощью директивы Apache RewriteRule), или хотя бы быть в курсе. Просто подумал, что стоит упомянуть!

Ответы (20)

avatar
David Murdoch
28 июля 2010 в 15:30
2266

Теперь это можно сделать в Chrome, Safari, Firefox 4+ и Internet Explorer 10pp4 +!

См. Ответ на этот вопрос для получения дополнительной информации: Обновление адресной строки с новым URL-адресом без хеширования или перезагрузка страницы

Пример:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Затем вы можете использовать window.onpopstate для обнаружения кнопок навигации назад / вперед:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Более подробно об управлении историей браузера см. в этой статье MDN.

The Red Pea
17 марта 2021 в 19:29
1

Обратите внимание, что OP дает понять, что они не пытаются перейти к другому источнику ; «не то чтобы я нарушал междоменные политики». - однако я я пытаюсь это сделать, а window.history API не позволяет переходить от одного источника к другому через pushState (что разумно ... как На сайте Mozilla говорится: «Новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес; в противном случае pushState () вызовет исключение».)

Edison Pebojot
19 мая 2021 в 05:42
1

Могу я спросить, какое значение имеет response.html? Это строка HTML?

DeeStarks
4 июня 2021 в 21:32
2

Какие данные нужно передать в «ответ»?

avatar
James Bond
5 августа 2021 в 17:55
-4

Просто используйте, он не перезагрузит страницу, а только URL:

$('#form_name').attr('action', '/shop/index.htm').submit();
Stefan Reich
27 августа 2021 в 07:08
0

Это не имеет никакого смысла

avatar
Webdeveloper011
10 января 2021 в 15:02
1

Этот код мне подходит. Я использовал его в своем приложении на ajax.

history.pushState({ foo: 'bar' }, '', '/bank');

После загрузки страницы в идентификатор с использованием ajax URL-адрес браузера изменяется автоматически без перезагрузки страницы.

Это функция ajax ниже.

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

Пример: с любой страницы или контроллера, например «Dashboard», когда я нажимаю на банк, он загружает список банков с использованием кода ajax без перезагрузки страницы. В настоящее время URL-адрес браузера не будет изменен.

history.pushState({ foo: 'bar' }, '', '/bank');

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

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }
avatar
Vinay Kaithwas
18 июля 2020 в 06:34
7

Ваш новый URL.

let newUrlIS =  window.location.origin + '/user/profile/management';

В некотором смысле вызов pushState () аналогичен установке window.location = "#foo" в том смысле, что оба они также создают и активируют другую запись истории, связанную с текущим документом. Но у pushState () есть несколько преимуществ:

history.pushState({}, null, newUrlIS);

Вы можете проверить корень: https://developer.mozilla.org/en-US/docs/Web/API/History_API

xeruf
8 февраля 2021 в 19:40
0

пожалуйста, добавьте ссылку на предполагаемые "преимущества" pushState :)

avatar
Omar bakhsh Twitter MomoAmoory
9 июня 2020 в 23:07
0

Это все, что вам нужно для навигации без перезагрузки

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();
avatar
Dheeraj Thedijje
29 ноября 2019 в 09:48
14

Эту красивую и простую функцию можно использовать в любом месте вашего приложения.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', title, new_url);
    
}

Вы можете не только редактировать URL-адрес, но и обновлять заголовок вместе с ним.

BIOHAZARD
7 февраля 2020 в 11:36
1

Прекрасно работает даже для якорей window.history.pushState('data', 'Title', '#new_location');

xeruf
8 февраля 2021 в 19:40
1

почему бы вам не использовать аргумент title в качестве заголовка в pushState?

avatar
Alireza
2 июля 2017 в 08:03
43

В современных браузерах и HTML5 в окне history есть метод pushState. Это изменит URL-адрес и поместит его в историю без загрузки страницы.

Вы можете использовать его так, он будет принимать 3 параметра, 1) объект состояния 2) заголовок и URL):

window.history.pushState({page: "another"}, "another page", "example.html");

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

Кроме того, существует history.replaceState(), который делает то же самое, за исключением того, что он изменяет текущую историю вместо создания новой!

Также вы можете создать функцию, чтобы проверить, существует ли history.pushState, а затем продолжить с остальными, как это:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

Кроме того, вы можете изменить # на <HTML5 browsers, что не приведет к перезагрузке страницы. Именно так Angular использует SPA в соответствии с хэштегом ...

Изменить # довольно просто, например:

window.location.hash = "example";

А обнаружить это можно так:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}
J0ANMM
17 июля 2018 в 11:54
0

Сделали бы window.onhashchange и window.onpopstate то же самое в этом случае?

MD. Atiqur Rahman
14 сентября 2018 в 13:54
0

Как загрузить и содержимое страницы? Он просто заменяет URL

Johann
15 сентября 2018 в 16:27
0

Загружайте контент, как обычно с ajax.

avatar
Suraj
27 октября 2015 в 08:33
17

Ниже представлена ​​функция для изменения URL без перезагрузки страницы. Он поддерживается только для HTML5.

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href="homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');
Snook
27 мая 2016 в 07:41
2

@Green, страница - это короткое название состояния, в которое вы переходите. Firefox в настоящее время игнорирует этот параметр, хотя может использовать его в будущем. Передача здесь пустой строки должна быть защищена от будущих изменений метода. От: developer.mozilla.org/en-US/docs/Web/API/…

avatar
Prathamesh Rasam
15 августа 2015 в 11:55
8

Используйте history.pushState() из API истории HTML 5.

Дополнительные сведения см. В API истории HTML5.

avatar
Haimei
10 июня 2015 в 18:25
161

Вот мое решение (newUrl - это ваш новый URL-адрес, который вы хотите заменить текущим):

history.pushState({}, null, newUrl);
Craig Jacobs
29 августа 2016 в 00:14
6

Лучше сначала протестировать с помощью if (history.pushState) {} На всякий случай старый браузер.

kkatusic
9 ноября 2017 в 10:19
1

Это больше не работает, вы получите в Firefox: операция небезопасна.

codepleb
3 июня 2020 в 07:26
0

И пользователь может даже установить закладку с таким подходом, красиво! Теперь я могу обновлять URL-адрес при вводе пользователем, и он может напрямую добавлять в закладки любые свои настройки.

Gregory Bowers
6 октября 2020 в 08:44
1

эй, kkatusic, вот почему Крейг Джейкобс сказал ТЕСТ. Вы тестируете его, пытаясь выполнить новую версию html5 (тест 1), и если это не удается, вы тестируете старую версию, и если это не удается, у вас возникают проблемы, если тест успешен для любого объекта, вы знаете, новый или старый браузер. довольно простая логика дружище! Проголосуйте за Крейга! :)

scipilot
28 мая 2021 в 04:39
0

@GregoryBowers Я не думаю, что kkatusic говорит, что метода не существует, он сказал, что при запуске отображается ошибка / предупреждение безопасности. Чтобы этот тест не провалился и по-прежнему выполнял функцию. Тест, предложенный Крейгом, не «пытается выполнить новую функцию html5», он просто проверяет, существует ли она в объекте истории.

moghwan
12 октября 2021 в 09:03
0

Это работает, только если newUrl является ОТНОСИТЕЛЬНЫМ или совпадает с текущим URL-адресом, и с учетом текущего протокола, например, если это https, newUrl должен быть таким же, не будет работать с http, даже если у них одинаковый базовый URL. Протестировано в Firefox (93), Edge (94), Chrome (94).

avatar
Shine
24 января 2014 в 08:49
26

До HTML5 мы могли использовать:

parent.location.hash = "hello";

и:

window.location.replace("http:www.example.com");

Этот метод перезагрузит вашу страницу, но HTML5 представил history.pushState(page, caption, replace_url), который не должен перезагружать вашу страницу.

OSWorX
12 мая 2018 в 09:00
2

Проблема с history.pushState(..) заключается в том, что если вы хотите перенаправить на другой домен, вступает в силу междоменная политика. В то время как с window.location.replace(..) возможно перенаправление на другой домен.

avatar
Erenor Paz
5 сентября 2013 в 13:55
9

Как указал Томас Стьернегаард Джеппесен, вы можете использовать History.js для изменения параметров URL, пока пользователь перемещается по вашим ссылкам Ajax и приложениям.

После этого ответа прошел почти год, а History.js вырос и стал более стабильным и кроссбраузерным. Теперь его можно использовать для управления состояниями истории в HTML5-совместимых браузерах, а также во многих браузерах, поддерживающих только HTML4. В этой демонстрации Вы можете увидеть пример того, как это работает (а также возможность попробовать его функции и ограничения.

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

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

avatar
Thomas Stjernegaard Jeppesen
21 ноября 2012 в 11:09
28

HTML5 replaceState - это ответ, как уже упоминалось Vivart и geo1701. Однако он поддерживается не во всех браузерах / версиях. History.js охватывает функции состояния HTML5 и обеспечивает дополнительную поддержку браузеров HTML4.

avatar
George Filippakos
19 ноября 2012 в 10:32
175

Вы также можете использовать HTML5 replaceState , если хотите изменить URL-адрес, но не хотите добавлять запись в историю браузера:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

Это "нарушит" работу кнопки "Назад". Это может потребоваться в некоторых случаях, например, в галерее изображений (где вы хотите, чтобы кнопка «Назад» возвращалась на страницу индекса галереи, а не возвращалась назад по каждому просмотренному вами изображению), при этом каждому изображению присваивается собственный уникальный URL-адрес.

avatar
Jeremy Warne
19 апреля 2011 в 11:43
24

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

Например:

  1. Пользователь на www.site.com/section/page/4

  2. Пользователь выполняет какое-то действие, которое изменяет URL-адрес на www.site.com/#/section/page/6 (с хешем). Допустим, вы загрузили на страницу правильный контент для страницы 6, поэтому, кроме хеша, пользователя это не слишком беспокоит.

  3. Пользователь передает этот URL кому-то другому или добавляет его в закладки

  4. Кто-то другой или тот же пользователь позже переходит на www.site.com/#/section/page/6

  5. Код на www.site.com/ перенаправляет пользователя на www.site.com/section/page/6, используя что-то вроде этого:

    if (window.location.hash.length> 0) { window.location = window.location.hash.substring (1); }

Надеюсь, в этом есть смысл! Это полезный подход в некоторых ситуациях.

avatar
Vivart
17 августа 2010 в 13:59
735

HTML5 представил методы history.pushState() и history.replaceState(), которые позволяют добавлять и изменять записи в истории соответственно. <1404782069

window.history.pushState('page2', 'Title', '/page2.php');

Подробнее об этом читайте в здесь

Spectric
2 апреля 2021 в 17:26
0

ИМО самое простое и чистое решение.

iYazee6
12 июля 2021 в 13:23
0

Отличный ответ, также можно изменить текущую историю, а не добавлять другую, используя replaceState (); developer.mozilla.org/en-US/docs/Web/API/History_API/…

avatar
Nate
13 декабря 2009 в 22:57
11

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

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href="http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
avatar
Steve
13 мая 2009 в 22:14
89
parent.location.hash = "hello";
Robin Rodricks
14 мая 2009 в 18:26
17

Я хочу изменить URL-адрес, а не только хеш - #mydata

Matthew Lock
24 ноября 2009 в 08:32
42

Изменение хэша может быть полезно в ajax, поскольку это своего рода состояние без использования файлов cookie, его можно добавлять в закладки и совместимо с кнопками возврата в браузере. В настоящее время Gmail использует это, чтобы сделать его более удобным для браузера.

noisy
17 июля 2013 в 07:07
0

@Jarvis: в чем разница?

MLK.DEV
6 ноября 2014 в 22:07
0

@noisy Отслеживание на стороне сервера не может видеть хэши, если они явно не отправлены в службу отслеживания.

catbadger
1 февраля 2017 в 13:57
0

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

Auspex
4 июня 2021 в 10:35
0

@catbadger Я не согласен. Это особенно полезно, если вы используете инфраструктуру MVC, которая маршрутизирует по хешу. Мой вариант использования заключается в том, что моя страница обновляется через AJAX, но я хочу, чтобы URL-адрес всегда отражал эти обновления. Если моя маршрутизация не использует хэш, я должен использовать метод HTML5 pushState(), но если он использует хеш, я могу использовать его.

Math Coder 101
23 июля 2021 в 16:57
0

Это лишь частично отвечает на вопрос. Мы хотим, чтобы изменился URL-адрес, а не хеш.

avatar
Gumbo
5 мая 2009 в 10:58
13

Любые изменения локации (window.location или document.location) вызовут запрос на этот новый URL, если вы не просто изменяете фрагмент URL. Если вы измените URL-адрес, вы измените URL-адрес.

Используйте методы перезаписи URL на стороне сервера, такие как Apache mod_rewrite, если вам не нравятся URL-адреса, которые вы сейчас используете.

Robin Rodricks
5 мая 2009 в 11:09
0

Могу я использовать "location.pathname" ??

Gumbo
5 мая 2009 в 11:47
3

Нет, изменение этого атрибута тоже вызовет запрос.

avatar
Robin Day
5 мая 2009 в 10:57
117

ПРИМЕЧАНИЕ. Если вы работаете с браузером HTML5, игнорируйте этот ответ. Теперь это возможно, как видно из других ответов.

Невозможно изменить URL в браузере без перезагрузки страницы. URL-адрес представляет собой последнюю загруженную страницу. Если вы измените его (document.location), страница будет перезагружена.

Одна очевидная причина в том, что вы пишете сайт на www.mysite.com, который выглядит как страница входа в банк. Затем вы меняете адресную строку браузера на www.mybank.com. Пользователь не будет знать, что на самом деле смотрит на www.mysite.com.

Eugene
19 июля 2021 в 16:18
1

удалите его или добавьте html4, потому что в настоящее время он отображается в поиске Google как быстрый ответ