Как я могу обновить страницу с помощью jQuery? - PullRequest
2282 голосов
/ 23 марта 2011

Как я могу обновить страницу с помощью jQuery?

Ответы [ 23 ]

3632 голосов
/ 23 марта 2011

Использование location.reload():

$('#something').click(function() {
    location.reload();
});

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

436 голосов
/ 23 марта 2011

Это должно работать во всех браузерах, даже без jQuery:

location.reload();
421 голосов
/ 23 июня 2013

Существует несколько неограниченных способов обновить страницу с помощью JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    Если нам нужно вытащить документ из веб-сервер снова (например, где содержимое документа изменяется динамически) мы передадим аргумент как true.

Вы можете продолжить творческий список:

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
191 голосов
/ 23 марта 2011

Много способов будет работать, я полагаю:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
118 голосов
/ 30 сентября 2011

Чтобы перезагрузить страницу с помощью jQuery, выполните:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

Подход, который я здесь использовал, был Ajax jQuery.Я протестировал его на Chrome 13. Затем я поместил код в обработчик, который вызовет перезагрузку. URL равен "", что означает эта страница .

103 голосов
/ 22 июня 2012

Если текущая страница была загружена запросом POST, вы можете использовать

window.location = window.location.pathname;

вместо

window.location.reload();

потому что window.location.reload() запросит подтверждение при вызове на странице, которая была загружена запросом POST.

62 голосов
/ 23 марта 2011

Вопрос должен быть,

Как обновить страницу с помощью JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Вы избалованы выбором.

53 голосов
/ 25 июля 2013

Возможно, вы захотите использовать

location.reload(forceGet)

forceGet - логическое и необязательное значение.

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

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

Или просто

location.reload()

, если вы хотите быстро илегко с кэшированием.

35 голосов
/ 14 ноября 2015

Три подхода с различным поведением, связанным с кэшем:

  • location.reload(true)

    В браузерах, которые реализуют параметр forcedReload location.reload(), перезагружается путем извлечения свежей копии страницы и всех ее ресурсов (скриптов, таблиц стилей, изображений и т. Д.). Не обслуживает любые ресурсы из кэша - получает свежие копии с сервера без отправки в запросе заголовков if-modified-since или if-none-match.

    Эквивалентно тому, что пользователь выполняет «жесткую перезагрузку» в браузерах, где это возможно.

    Обратите внимание, что передача true в location.reload() поддерживается в Firefox (см. MDN ) и Internet Explorer (см. MSDN ), но не поддерживается универсально и не является частью спецификация W3 HTML 5 , ни спецификация W3 HTML 5.1 , ни стандарт WHATWG HTML Living .

    В неподдерживаемых браузерах, таких как Google Chrome, location.reload(true) ведет себя так же, как location.reload().

  • location.reload() или location.reload(false)

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

    Насколько я могу судить, точно, как браузер должен использовать свой кеш при выполнении вызова location.reload(), не указано и не задокументировано; Я определил поведение выше экспериментально.

    Это эквивалентно тому, что пользователь просто нажимает кнопку «обновить» в своем браузере.

  • location = location (или бесконечно много других возможных методов, которые включают присвоение location или его свойствам)

    Работает только в том случае, если URL-адрес страницы не содержит фрагмента / хэшбэнг!

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

    Это эквивалентно (с точки зрения кэширования) пользователю, открывающему страницу в новой вкладке.

    Однако, если URL-адрес страницы содержит хэш, это не будет иметь никакого эффекта.

    Опять же, поведение кэширования здесь не определено, насколько я знаю; Я определил это тестированием.

Итак, в итоге вы хотите использовать:

  • location = location для максимального использования кэша, , пока страница не имеет хеша в своем URL, в этом случае это не будет работать
  • location.reload(true) для получения новых копий всех ресурсов без повторной проверки (хотя это не универсально поддерживается и будет вести себя не иначе, чем location.reload() в некоторых браузерах, таких как Chrome)
  • location.reload() для точного воспроизведения эффекта нажатия пользователем кнопки «Обновить».
25 голосов
/ 14 октября 2013

window.location.reload() перезагрузится с сервера и снова загрузит все ваши данные, скрипты, изображения и т. Д.

Так что, если вы просто хотите обновить HTML, window.location = document.URL вернется гораздо быстрее и с меньшим трафиком. Но он не перезагрузит страницу, если в URL есть хеш (#).

...