Заменить домен в URL без перезагрузки страницы [дублировать]

Вот простой пример, который может продемонстрировать разницу.

Основное отличие состоит в том, что массив будет копировать исходные данные и использовать другой объект, который мы можем изменить в исходном массиве.

import numpy as np
a = np.arange(0.0, 10.2, 0.12)
int_cvr = np.asarray(a, dtype = np.int64)

Содержимое в массиве (a) остается нетронутым, и все же мы можем выполнять любую операцию над данными с использованием другого объекта без изменения содержимого в исходном массиве.

1868
задан Robinicks 5 May 2009 в 11:54
поделиться

19 ответов

Теперь это можно сделать в 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 .

1637
ответ дан Community 18 August 2018 в 20:07
поделиться
  • 1
    Как это делает facebook в IE7? – Dominic Tobias 1 May 2012 в 10:35
  • 2
    @CHiRiLo проверьте history.js , который обеспечивает резерв для браузеров, которые не поддерживают API истории HTML5. – David Murdoch 19 September 2012 в 23:21
  • 3
    @infensus Если в URL-адресе есть знак #, этот трюк существует для years . – Izkata 9 November 2012 в 00:26
  • 4
    Что означает «pp4 +», часть "IE10pp4 +" имею в виду? – Scott David Tesler 13 December 2012 в 04:55
  • 5
    предварительный просмотр платформы 4 – David Murdoch 13 December 2012 в 23:23

В современных браузерах и 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 в соответствии с hashtag ...

Изменить # довольно легко, делая:

window.location.hash = "example";

, и вы можете обнаружить его следующим образом:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}
8
ответ дан Alireza 18 August 2018 в 20:07
поделиться

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

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

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

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

7
ответ дан Erenor Paz 18 August 2018 в 20:07
поделиться

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

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

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

93
ответ дан George Filippakos 18 August 2018 в 20:07
поделиться

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

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

12
ответ дан Gumbo 18 August 2018 в 20:07
поделиться
  • 1
    Могу ли я использовать «location.pathname»? – Robinicks 5 May 2009 в 12:09
  • 2
    Нет, изменение этого атрибута вызовет и запрос. – Gumbo 5 May 2009 в 12:47

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

history.pushState({}, null, newUrl);
46
ответ дан Haimei 18 August 2018 в 20:07
поделиться
  • 1
    Лучше всего сначала проверить, если (history.pushState) {} На всякий случай старый браузер. – Craig Jacobs 29 August 2016 в 00:14
  • 2
    Это не работает больше, вы получите в Firefox: операция небезопасна. – kkatusic 9 November 2017 в 11:19

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

-9
ответ дан Hexagon Theory 18 August 2018 в 20:07
поделиться
  • 1
    htaccess работает только с запросами сервера. Hashtags не отправляются на сервер, поэтому переписывание htaccess не может работать. – samvermette 2 March 2010 в 04:29
  • 2
    – HoldOffHunger 29 August 2018 в 21:16

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

-4
ответ дан Huy Truong 18 August 2018 в 20:07
поделиться
  • 1
    Быстрый поиск показывает, что pushState упоминается только 14 раз в других ответах! – Nathan Tuggy 13 July 2017 в 04:26

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

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

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

382
ответ дан Jay 18 August 2018 в 20:07
поделиться
  • 1
    Может не работать по file:/// по соображениям безопасности, например. Firefox 30. Проверьте localhost на python -m SimpleHTTPServer. – Ciro Santilli 新疆改造中心 六四事件 法轮功 9 July 2014 в 17:05
  • 2
    Я использовал это на codeigniter. – jned29 24 May 2016 в 03:27
  • 3
    Предполагается, что первым параметром будет объект, а не только строка. – Alexis Wilke 4 June 2016 в 04:23
  • 4
    ИМО это действительно лучший ответ. Если все, что вы хотите сделать, это обновить текущий URL ({}, null, strNewPath) - это все, что вам нужно сделать. Лучше всего сначала проверить if (history.pushState) {} – Craig Jacobs 29 August 2016 в 00:13
  • 5
    вы можете просто ввести null для первых 2 параметров, если вы не хотите их менять. Вы также можете использовать абсолютный URL для третьего параметра. – Andrew 3 January 2017 в 19:20
parent.location.hash = "hello";
73
ответ дан Martin. 18 August 2018 в 20:07
поделиться
  • 1
    Я хочу изменить URL, а не только хеш - #mydata – Robinicks 14 May 2009 в 19:26
  • 2
    Изменение хеша может быть полезно в ajax, поскольку это своеобразное состояние без использования файлов cookie, является закладок и совместимо с кнопками браузера. Gmail использует это в наши дни, чтобы сделать его более удобным для браузера. – Matthew Lock 24 November 2009 в 09:32
  • 3
    @Jarvis: в чем разница? – noisy 17 July 2013 в 08:07
  • 4
    @noisy Отслеживание на стороне сервера не может видеть хеши, если оно явно не отправлено службе отслеживания. – RedYetiCo 6 November 2014 в 23:07
  • 5
    это не полезно, если вы используете фреймворк mvc, который маршрутизирует хэш, например, позвоночник. – catbadger 1 February 2017 в 14:57

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

parent.location.hash = "hello";

и:

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

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

20
ответ дан Patrioticcow 18 August 2018 в 20:07
поделиться
  • 1
    Проблема с history.pushState(..) заключается в том, что если вы хотите перенаправить на другой домен, применяется политика перекрестного домена. В то время как с window.location.replace(..) возможно перенаправление на другой домен. – OSWorX 12 May 2018 в 09:00

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

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

2
ответ дан Prathamesh Rasam 18 August 2018 в 20:07
поделиться

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

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

96
ответ дан raBne 18 August 2018 в 20:07
поделиться
  • 1
    Я не хочу изменять домен, только путь и имя файла. – Robinicks 5 May 2009 в 11:59
  • 2
    Это все еще не останавливает потенциальных рисков безопасности, поскольку браузер не знает, что domain / mysite и domain / othersite считаются «безопасными». пользователем. Может быть, вопрос в том, почему вы хотите изменить URL-адрес? Если вы хотите скрыть его от пользователя, вы можете просто запустить приложение в iframe. – Robin Day 5 May 2009 в 12:04
  • 3
    Вы можете сделать это с помощью Flash. Это позволит вам изменить URL-адрес без запроса. Это возможно, потому что Flash работает за пределами браузера, но очень плотно с ним. – Nick Berardi 14 December 2009 в 04:54
  • 4
    Должен сказать, что есть вполне обоснованные причины для изменения URL-адреса в адресной строке на стороне клиента. Например, если у вас есть таблица данных с пейджингом, сортировкой и фильтрацией и хотите, чтобы эти вещи были включены в Ajax, но все же обновляете URL-адрес, чтобы текущее состояние страницы было заклассифицировано. Я могу понять риски безопасности с изменением имени домена (фишинг и т. Д.), Но почему браузер не разрешает изменять только часть URL-адреса права домена верхнего уровня с помощью скрипта? – Sunday Ironfoot 29 April 2010 в 16:58
  • 5
    этот ответ более 100% прав. См. Мой ответ для деталей. – David Murdoch 28 July 2010 в 16:31

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

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

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

6
ответ дан satoshi 18 August 2018 в 20:07
поделиться

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
11
ответ дан sth 18 August 2018 в 20:07
поделиться

Ниже приведена функция изменения 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');
9
ответ дан Suraj 18 August 2018 в 20:07
поделиться
  • 1
    Что page? – Green 26 November 2015 в 19:06
  • 2
    @Green, страница - это короткий заголовок для состояния, в котором вы перемещаетесь. В настоящее время Firefox игнорирует этот параметр, хотя он может использовать его в будущем. Передача пустой строки здесь должна быть безопасной против будущих изменений метода. От: developer.mozilla.org/en-US/docs/Web/API/… – Snook 27 May 2016 в 07:41

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

25
ответ дан Thomas Stjernegaard Jeppesen 18 August 2018 в 20:07
поделиться

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

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

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

96
ответ дан raBne 18 August 2018 в 20:07
поделиться
  • 1
    Я не хочу изменять домен, только путь и имя файла. – Robinicks 5 May 2009 в 11:59
  • 2
    Это все еще не останавливает потенциальных рисков безопасности, поскольку браузер не знает, что domain / mysite и domain / othersite считаются «безопасными». пользователем. Может быть, вопрос в том, почему вы хотите изменить URL-адрес? Если вы хотите скрыть его от пользователя, вы можете просто запустить приложение в iframe. – Robin Day 5 May 2009 в 12:04
  • 3
    Вы можете сделать это с помощью Flash. Это позволит вам изменить URL-адрес без запроса. Это возможно, потому что Flash работает за пределами браузера, но очень плотно с ним. – Nick Berardi 14 December 2009 в 04:54
  • 4
    Должен сказать, что есть вполне обоснованные причины для изменения URL-адреса в адресной строке на стороне клиента. Например, если у вас есть таблица данных с пейджингом, сортировкой и фильтрацией и хотите, чтобы эти вещи были включены в Ajax, но все же обновляете URL-адрес, чтобы текущее состояние страницы было заклассифицировано. Я могу понять риски безопасности с изменением имени домена (фишинг и т. Д.), Но почему браузер не разрешает изменять только часть URL-адреса права домена верхнего уровня с помощью скрипта? – Sunday Ironfoot 29 April 2010 в 16:58
  • 5
    этот ответ более 100% прав. См. Мой ответ для деталей. – David Murdoch 28 July 2010 в 16:31
-1
ответ дан Sheetal Kumar Maurya 30 October 2018 в 08:24
поделиться
Другие вопросы по тегам:

Похожие вопросы: