Как перезагрузить страницу используя JavaScript


877

Как я могу перезагрузить страницу, используя JavaScript?

Мне нужен метод, который работает во всех браузерах.

Ответы:


949

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.

82
Значение true заставит страницу перезагрузиться с сервера. «false» перезагрузится из кэша, если доступно.
barro32

3
.reload(true)Добавляется ли в историю? Если так, как избежать этого с перезагрузкой?
Johntrepreneur


1
Это лучший ответ и должен быть на вершине. Моя проблема с другими функциями заключается в том, что они не обновляли страницу содержимым с сервера, а использовали кеш вместо этого, поэтому решение JavaScript 1.2 было лучшим и единственным решением для меня.
Райан Coolwebs

8
.reload (true) или .reload (false) устарела согласно моей IDE, и github.com/Microsoft/TypeScript/issues/28898 - теперь должен использовать .reload ()
danday74

392
location.reload();

Смотрите эту страницу MDN для получения дополнительной информации.

Если вы обновляете после, onclickвам нужно будет возвращать false сразу после

location.reload();
return false;

23
какая разница между location.reload()а window.location.reload()?
Raptor

54
@ShivanRaptor Обычно ни один, в контексте веб-браузера, не locationявляется таким же, window.locationкак windowглобальный объект.
Лекенштейн

1
не забывайте, return false;если вы звоните по ссылке через ссылку.
Римиан

2
Я предпочитаю использовать window.location.reload();для удобства чтения, так как это locationможет быть локальная переменная - тогда как вы обычно избегаете переменных имени window.
Йети

219

Вот 535 способов перезагрузить страницу, используя JavaScript , самый простой способ location = location.

Это первые 50:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...

84
это интересно, но теперь я в замешательстве
Арун Прасад ES

14
Также подчеркивается особенность Javascript :)
Джереми Тилле

53
Мне лично не нравится этот ответ, поскольку он просто показывает несколько разных реализаций для изменения местоположения. Эти способы представляют собой различные варианты выполнения функции или доступа к атрибуту в javascript. НЕ разные способы перезагрузить страницу.
Джошуа Беренс

42
Конечно, есть даже больше, как:window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Ренато

85

Вы можете выполнить эту задачу, используя window.location.reload();. Поскольку есть много способов сделать это, но я думаю, что это подходящий способ перезагрузить тот же документ с помощью JavaScript. Вот объяснение

JavaScript window.locationобъект может быть использован

  • получить адрес текущей страницы (URL)
  • перенаправить браузер на другую страницу
  • перезагрузить ту же страницу

window: в JavaScript представляет открытое окно в браузере.

location: в JavaScript содержит информацию о текущем URL.

locationОбъект как фрагмент windowобъекта и вызывается через window.locationсобственность.

location Объект имеет три метода:

  1. assign(): используется для загрузки нового документа
  2. reload(): используется для перезагрузки текущего документа
  3. replace(): используется для замены текущего документа новым

Так что здесь мы должны использовать reload(), потому что это может помочь нам в перезагрузке того же документа.

Так что используйте это как window.location.reload();.

Демо онлайн на jsfiddle

Чтобы попросить браузер получить страницу непосредственно с сервера, а не из кэша, вы можете передать trueпараметр в location.reload(). Этот метод совместим со всеми основными браузерами, включая IE, Chrome, Firefox, Safari, Opera.


2
Ах, ха! replace()оказалось решением, которое я искал, потому что мне нужно было перезагрузить страницу с небольшим изменением в строке запроса.
Бернард Химмен

От w3schools: «Разница между assign () и replace () состоит в том, что replace () удаляет URL-адрес текущего документа из истории документа, что означает, что невозможно использовать кнопку« назад », чтобы вернуться к оригинальный документ."
pasaba por aqui

54

Пытаться:

window.location.reload(true);

Параметр, установленный на true, перезагружает свежую копию с сервера. Оставив его, вы получите страницу из кэша.

Дополнительную информацию можно найти на MSDN и в документации Mozilla .


1
Что делать, если я хочу обновить внешнюю веб-страницу www.xyz.com/abc?
DoIt

@Dev: Вы должны попробовать с «заменить», как упоминалось позже
Жан Поль AKA el_vete

@Orane: мне нравится как простота, так и находчивость этого ответа, в частности, чтобы дать много вариантов только для того, чтобы удовлетворить запрос опроса, в котором говорится, что спасибо за предоставление ссылки на авторитетные ссылки в этой ситуации, а также за будущие ссылки для каждого браузера у меня есть свой собственный движок JS для рендеринга ... Я думаю, что вопрос очень общий и что он должен зависеть от того, для чего вы хотите это сделать, потому что еще одна веб-ссылка: " phpied.com/files/location-location/location- location.html "может полностью удовлетворить описание этого вопроса. Тем не менее, этот помог мне;)
Жан Поль AKA el_vete

1
Это все еще правда? Обе эти ссылки не упоминают никаких параметров для перезагрузки.
Рюдигер Шульц

51

Я искал некоторую информацию о перезагрузках на страницах, полученных с помощью запросов POST, например, после отправки method="post"формы.

Чтобы перезагрузить страницу, сохраняя данные POST, используйте:

window.location.reload();

Чтобы перезагрузить страницу, отбрасывающую данные POST (выполнить запрос GET), используйте:

window.location.href = window.location.href;

Надеюсь, это может помочь другим, ищущим ту же информацию.


Спасибо за ответ, включая ссылку на перезагрузку документа, полученного по POSTзапросу.
Кристофер Шульц

Хорошее различие между GETи POSTметодами
Hassan Baig

Этот ответ был слишком далеко внизу!
Грег Рэндалл

1
window.location.href = window.location.hrefне перезагружает страницу, если текущий URL содержит #. Вы можете удалить хеш, если вам это не нужно window.location.href = window.location.href.split('#')[0];.
Роланд Старк


37

Это работает для меня:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/


Это, на мой
взгляд

1
Я особенно ценю включение функции тайм-аута, потому что у меня есть сообщение, которое я все еще хочу просмотреть, прежде чем произойдет обновление. Престижность!
Мэтт Кременс

Вы можете установить разные значения в качестве второго аргумента функции setTimeout, но она не будет работать, перезагрузка произойдет немедленно, как ее решить?
О. Куз

1
@ О.Кузь так не думаю. Допустим, если вы установите значение 5000 мс, перезагрузка произойдет через 5 секунд. см. jsfiddle.net/umerqureshi/znruyzop/446
umer

1
Мне нужно найти ошибку в моем коде) Большое спасибо!
О.Куз

15

Если вы положите

window.location.reload(true);

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


Ну, или пока вы не откроете другой URL. Вероятно, это зависит от способности браузера обрабатывать непрерывные загрузки страниц.
Adamdunson

хорошо, это зависит от того, где вы разместите его, как вы правильно сказали. Мы ссылаемся здесь просто на то, что, возможно, тег привязки не является интуитивным элементом для выполнения действия, такого как перезагрузка страницы. Предложение: Мы полагаемся на другой объект пользовательского интерфейса в качестве цели для выполнения события onclick. Вы можете сделать это в jQuery после загрузки страницы с помощью таргетинга на div, например, если вы украсили его css. Это зависит от того, что вы хотите с ним сделать. В этом контексте кнопка, а не кнопка типа ввода. Если мы не планируем передавать аргумент в бэкэнд-приложение, это кажется более подходящим.
Жан Поль AKA el_vete

IE: <button onclick = "javascript: window.location.reload (true);"
Жан Поль AKA el_vete

11
location.href = location.href;

5
Современные браузеры игнорируют это, потому что href не изменяется, поэтому нет необходимости перезагружать его. Вы должны использовать это только в качестве аварийного переключения для старых браузеров без перезагрузки: (location.reload? Location.reload (): location.href = location.href)
Radek Pech

@RadekPech Каких старых браузеров нет location.reload()?
Матиас

8

Чтобы сделать это легко и просто, используйте location.reload(). Вы также можете использовать, location.reload(true)если вы хотите получить что-то с сервера.


8

Используя кнопку или просто поместите ее в тег «a» (якорь):

<input type="button" value="RELOAD" onclick="location.reload();" />

Попробуйте это для других нужд:

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one

1
интересно ... как насчет <button> </ button>? работает так же, верно?
Жан Поль AKA el_vete

1
Это работает как шарм! Смотрите мой ответ ниже :) Спасибо
Жан Поль AKA el_vete


4

Автоматическая перезагрузка страницы через 20 секунд.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>

4

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

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

Отредактировано, чтобы показать, как это выглядит при включении в проект

2016-07-02

Приношу свои извинения, так как это личный проект, предполагающий использование пользовательского интерфейса jQuery, Themeroller, каркаса иконок, таких методов, как вкладки jQuery, но на испанском языке;)


@Peter Mortensen: Спасибо за редактирование, этот прототип проекта был сделан для колледжа, поэтому он должен быть на испанском языке с прикрепленными снимками экрана ... мои извинения за это ... Конечно, было необходимо иметь некоторое ядро, связанное с пользовательским интерфейсом jQuery зависимости, чтобы он сливался вместе, например: --- например, виджет ThemeRoller jqueryui.com/themeroller , и плагины, такие как: plugins.jquery.com/qTip2 , datatables.net ... сама библиотека jQuery и т. д., но действие было выполнено на основе некоторых ответов выше: onclick = "javascript: window.location.reload (true);">!
Жан Поль AKA el_vete

3

Это должно работать:

window.location.href = window.location.href.split( '#' )[0];

или

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

Я предпочитаю это по следующим причинам:

  • Удаляет деталь после #, обеспечивая перезагрузку страницы в браузерах, которые не будут перезагружать контент, в котором она есть.
  • Он не спрашивает вас, хотите ли вы опубликовать последний контент, если вы недавно отправили форму.
  • Это должно работать даже в самых последних браузерах. Испытано на Lasted Firefox и Chrome.

Кроме того, вы можете использовать самый последний официальный метод для этой задачи

window.location.reload()

3

Используйте эту кнопку, чтобы обновить страницу

DEMO

<input type="button" value="Reload Page" onClick="document.location.reload(true)">

2

Метод reload () используется для перезагрузки текущего документа.

Метод reload () действует так же, как кнопка перезагрузки в вашем браузере.

По умолчанию метод reload () перезагружает страницу из кэша, но вы можете заставить ее перезагрузить страницу с сервера, установив для параметра forceGet значение true: location.reload (true).

        location.reload();

-3

Вы можете просто использовать

window.location=document.URL

где document.URL получает URL текущей страницы, а window.location перезагружает его.


2
Современные браузеры игнорируют это, потому что href не изменяется, поэтому нет необходимости перезагружать его. Вы должны использовать это только в качестве аварийного переключения для старых браузеров без перезагрузки: (location.reload? Location.reload (): location = document.URL)
Radek Pech
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.