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

1818

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

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

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

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads
  • 0
    Вы можете сделать это во Flash. Вам просто нужно небольшое фоновое приложение и передать свой JavaScript во флэш-память, чтобы изменить строку адреса.
  • 0
    Это возможно без использования хэшей, посмотрите на плагин asual jQuery Address : пример здесь . Обратите внимание, что он будет использовать хеши в IE, для этого нет обходного пути.
Показать ещё 1 комментарий
Теги:
url
url-rewriting
friendly-url

20 ответов

1787
Лучший ответ

Теперь это можно сделать в браузерах Chrome, Safari, FF4 + и IE10pp4 +!

См. этот вопрос для получения дополнительной информации: Обновление адресной строки с новым 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.

  • 2
    @manakor "Теперь это можно сделать в Chrome, Safari, FF4 + и IE10pp3 +!" ... Похоже, так и будет.
  • 254
    Как тогда Facebook делает это в IE7?
Показать ещё 24 комментария
447

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

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

Подробнее об этом от здесь

  • 10
    Может не работать с file:/// по соображениям безопасности, например, Firefox 30. Тест на localhost python -m SimpleHTTPServer с помощью python -m SimpleHTTPServer .
  • 2
    Я использовал это на codeigniter.
Показать ещё 5 комментариев
98

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

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

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

98

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

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

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

  • 28
    Я не хочу менять домен, только путь и имя файла.
  • 4
    Это все еще не останавливает потенциальные угрозы безопасности, так как браузер не знает, что домен / mysite и domain / othersite оба считаются "безопасными" для пользователя. Может быть, вопрос должен быть: почему вы хотите изменить URL? Если это скрывает его от пользователя, вы можете просто запустить свое приложение в iframe.
Показать ещё 8 комментариев
73
parent.location.hash = "hello";
  • 12
    Я хочу изменить URL, а не только хэш - #mydata
  • 38
    Изменение хеша может быть полезно в ajax, так как это своего рода состояние без использования куки, оно доступно для закладки и совместимо с кнопками возврата браузера. Gmail использует это в настоящее время, чтобы сделать его более удобным для браузера.
Показать ещё 3 комментария
58

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

history.pushState({}, null, newUrl);
  • 1
    Лучше всего сначала проверить с if (history.pushState) {} На всякий случай старый браузер.
  • 0
    Это больше не работает, вы получите в Firefox: операция небезопасна.
26

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

22

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

parent.location.hash = "hello";

и

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

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

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

Если вы пытаетесь разрешить пользователям делать закладки на страницы и делиться ими, и вам не нужен именно правильный URL, и вы не используете хэш-привязки для чего-либо еще, то вы можете сделать это за два части; Вы используете расположение.hash, рассмотренное выше, а затем реализуете проверку на домашней странице, чтобы найти 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);
}

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

15

В современных браузерах и 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);
}
  • 0
    window.onhashchange ли window.onhashchange и window.onpopstate делать то же самое в этом случае?
  • 0
    Как загрузить содержимое страницы? Он просто заменяет URL
Показать ещё 1 комментарий
12

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

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

  • 0
    Могу ли я использовать "location.pathname" ??
  • 3
    Нет, изменение этого атрибута также вызовет запрос.
11

Вы можете добавить метки привязки. Я использую это на своем сайте http://www.piano-chords.net/, чтобы отслеживать с помощью Google Analytics, что люди посещают на странице. Я просто добавляю якорный тег, а затем часть страницы, которую я хочу отслеживать.

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
  • 1
    Как это работает с индексацией поисковой системы?
10

Ниже приведена функция изменения 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');
  • 4
    Что такое page ?
  • 1
    @Green, страница - это краткое название штата, в который вы переходите. Firefox в настоящее время игнорирует этот параметр, хотя может использовать его в будущем. Передача пустой строки здесь должна быть безопасной от будущих изменений метода. От: developer.mozilla.org/en-US/docs/Web/API/…
7

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

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

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

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

6

Теперь вы можете сделать это в большинстве "современных" браузеров!

1) Вот оригинальная статья: -

HTML5: изменение URL-адреса браузера без обновления страницы.

см. документы MDN.

Вы можете сделать это:

window.history.pushState("object or string", "Title", "/new-url");
4

Возможно, без использования хэшей, посмотрите на asual jQuery Address plugin:

Пример здесь.

Обратите внимание, что он будет использовать хэши в IE, для этого нет обходного пути.

3

Использовать history.pushState() из HTML 5 API истории

ссылка для получения более подробной информации API истории HTML5

-1
    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

Вы можете увидеть здесь Обновление URL браузера без перезагрузки страницы

  • 2
    Пожалуйста, рассмотрите возможность добавления более подробного описания, а не вставки ссылки на ваш пост в блоге.
-6

Используйте window.history.pushState("object or string", "Title", "/new-url"), но он по-прежнему отправляет новый запрос на сервер

  • 15
    Быстрый поиск показывает, что pushState упоминается только 14 раз в других ответах!
-8

Предполагая, что вы не пытаетесь сделать что-то злонамеренное, все, что вы хотели бы сделать с вашими собственными URL-адресами, может быть вызвано магией htaccess.

  • 8
    htaccess работает только с запросами к серверу. Хештеги не отправляются на сервер, поэтому перезапись htaccess может не работать.
  • 0
    Перенаправления htaccess позволяют пользователям посещать адрес A и видеть веб-страницу по адресу B, сохраняя при этом адрес A. Я думаю, что OP хочет сделать обратное: пользователь посещает адрес A и видит веб-страницу с адресом A с адресом B. Однако интересное предложение, потому что Я должен был придумать это!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню