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


2454

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


29
Поскольку jQuery - это инфраструктура javascript для простой манипуляции с DOM и привязки к событиям, я бы порекомендовал вам запросить javascript вместо jQuery.
Во II

19
Вам не нужен jQuery для этого.
Stardust

13
Более актуально, чем когда-либо: needsmorejquery.com
Картик Чуг

@Stardust Вам не нужен jQuery для всего, что вы делаете с jQuery, потому что все возможно с JavaScript, если вы можете сделать это jQuery.
Я самый глупый человек

Ответы:


3828

Используйте location.reload():

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

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


29
Это не сработало для меня. Это сработало: window.location.href = window.location.href;
Истер

5
Это не сработало для меня. window.location.href=window.location.href;и location.href=location.href;работал.
twharmon

23
window.location.reload(true);будет сильно обновляться, иначе по умолчанию это ложь
Сагар Налиапара

@ Сагар Н, это работает и для меня. Спасибо. Последние несколько дней я старался с другим подходом, но ваше решение спасло меня.
Ludus H

1
@FaridAbbas location.reload();- это стандартный javascript. Вам не нужен jQuery для этого.
Марк Байенс

457

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

location.reload();

450

Есть несколько неограниченных способов обновить страницу с помощью 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>


10
+1 за список и jsfiddle. У меня есть вопрос, в jsfiddle 1 и 6 заставить сгенерированную страницу на мгновение исчезнуть при перезагрузке, а 2-5 сделать перезагрузку страницы "незаметной". В инструменте dev в chrome я вижу, что страница регенерируется, но не могли бы вы объяснить, как перерисовывается процесс по-другому? Пожалуйста. Заранее спасибо.
Cԃ ա ԃ

@ Cԃ ա ԃ Не вижу разницы ... Может проблема в кеше? Я скоро посмотрю.
Ионика Бизэ

2
1 и 6 (reload()/(false))медленнее. хммм. интересно. :) и 1 и 6 соответствуют reload()параметрам по умолчанию false.
Cԃ ա ԃ

location.href = location.hrefэто то, что я обычно использую, но спасибо за других. Очень полезный! +1
Амаль Мурали

1
@ Cԃ ա ԃ Наконец, я могу воспроизвести то, что вы видите, и я спросил здесь .
Ионика Бизэ

202

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

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;

41
Это window.location.href=window.location.href;ничего не изменит, если в конце вашего URL есть # / example.com/something#blah
hashbang

18
На случай, если кому-то интересно, в чем разница между location.reload()и чем history.go(0): нет. Соответствующий раздел спецификации HTML 5 по адресу w3.org/TR/html5/browsers.html#dom-history-go явно указывает, что они эквивалентны: «Когда go(delta)метод вызывается, если аргумент метода был опущен или имеет значение ноль, пользовательский агент должен действовать так, как если бы location.reload()метод был вызван вместо этого. "
Марк Амери

Единственный, который работал для меня, был этот: window.location.href = window.location.href;
Истер

123

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

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

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


68
Downvoting. Это на самом деле не отвечает на вопрос, а показывает, как заменить HTML-код страницы ответом Ajax. Это отличается от перезагрузки страницы: например, я сейчас работаю с ситуацией, когда это не поможет решить исходную проблему.
Марнен Лайбоу-Козер

5
Одна из проблем с такой перезагрузкой всего HTML заключается в том, чтобы вручную вызывать события onload / ready и смягчать перезапись ранее объявленных переменных, состояние которых вы, возможно, захотите сохранить после обновления.
PassKit

3
Если вы не очень осторожны с вашим кодом это будет приводить к утечкам памяти , где вы прикрепленными обработчики событий и такие , не отделяя их перед заменой кода они прикреплены.
Даниэль Ллевеллин,

Я использую это для перезагрузки нашей панели каждую секунду, ноль мерцает! Это комета бедного человека. Благодаря @DanielLlewellyn et al. для предупреждений.
Уильям Энтрикен

3
Несколько человек отметили, что этот подход полезен для обновления только части страницы. Это не так. Я думаю, что эти люди неправильно понимают contextпараметр $.ajaxи ожидают, что он каким-то образом исполнит какую-то магию. Все, что он делает, это устанавливает thisзначение функций обратного вызова . Ajax to URL of ""попадет на URL, на котором вы сейчас находитесь, тем самым обычно загружая полный HTML (включая <html>и <head>и <body>), и ничто в этом ответе не отфильтровывает то, что вам не нужно.
Марк Амери

107

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

window.location = window.location.pathname;

вместо

window.location.reload();

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


12
Однако это потеряет строку запроса, в то время как window.location = window.location не
потеряет

@mrmillsy window.location = window.locationтакже несовершенен; он ничего не делает, если в текущем URL есть хрупкая запись (hashbang).
Марк Амери

64

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

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

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

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


55

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

location.reload(forceGet)

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

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

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

Или просто

location.reload()

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


41

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

  • 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 Standard .

    В неподдерживаемых браузерах, таких как 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() чтобы точно воспроизвести эффект от пользователя, нажав кнопку «обновить».

+1 за местоположение = местоположение; не многие люди, кажется, предлагают это, хотя это короче, чем большинство предоставленных ответов, единственным недостатком является его удобочитаемость, в то время как location.reload () немного более семантически
Brandito

@Brandito Что еще более важно, location = locationне работает, если в URL есть хэш. Для любого сайта, который использует фрагменты - или даже для любого сайта, где кто-то, ссылающийся на страницу, может добавить ссылку в URL-адрес, - это нарушает его.
Марк Амери

26

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

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


По крайней мере, такое поведение верно в Chrome - location.reload()форсирует повторную проверку кэшированных ресурсов, даже без аргументов, и window.location = document.URLрад обслуживать кэшированные ресурсы, не обращаясь к серверу, пока они свежие.
Марк Эмери


16

Поскольку вопрос носит общий характер, давайте попробуем суммировать возможные решения для ответа:

Простое простое решение JavaScript :

Самый простой способ - это однострочное решение, размещенное соответствующим образом:

location.reload();

Многим здесь не хватает, потому что они надеются получить некоторые «баллы», так как сама функция reload () предлагает логический параметр (подробности: https://developer.mozilla.org/en-US/docs/Web. / API / Местоположение / Перезагрузка ).

Метод Location.reload () перезагружает ресурс с текущего URL. Его необязательный уникальный параметр - Boolean, который, когда он равен true, заставляет страницу всегда перезагружаться с сервера. Если оно ложно или не указано, браузер может перезагрузить страницу из своего кэша.

Это означает, что есть два пути:

Решение 1. Принудительная перезагрузка текущей страницы с сервера.

location.reload(true);

Решение 2. Перезагрузка из кэша или с сервера (в зависимости от браузера и вашей конфигурации)

location.reload(false);
location.reload();

И если вы хотите объединить его с jQuery для прослушивания события, я бы рекомендовал использовать метод ".on ()" вместо ".click" или других оболочек событий, например, более подходящим решением будет:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});

15

Вот решение, которое асинхронно перезагружает страницу, используя jQuery. Это позволяет избежать мерцания, вызванного window.location = window.location. В этом примере показана страница, которая постоянно перезагружается, как на панели инструментов. Он испытан в бою и работает на информационном телевизоре на Таймс-сквер.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Ноты:

  • Использование $.ajaxнепосредственно как $.get('',function(data){$(document.body).html(data)}) причины CSS / JS файлов , чтобы получить кэш-разорено , даже если вы используете cache: true, поэтому мы используемparseHTML
  • parseHTMLне найдет bodyтег, поэтому все ваше тело нуждается в дополнительном div, я надеюсь, что этот кусок знаний поможет вам однажды, вы можете догадаться, как мы выбрали идентификатор для этогоdiv
  • Используйте на http-equiv="refresh"всякий случай, если что-то пойдет не так с javascript / server hiccup, тогда страница все равно будет перезагружена без вашего телефонного звонка
  • Этот подход, вероятно, как-то теряет память, http-equivобновление исправляет

14

я нашел

window.location.href = "";

или

window.location.href = null;

также обновляет страницу.

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


хорошая стрельба, я не знал об этом.
Джунаид Атари

9

Вы можете использовать метод JavaScript location.reload() . Этот метод принимает логический параметр. trueили false. Если параметр есть true; страница всегда перезагружается с сервера. Если это так false; который используется по умолчанию или с пустым параметром браузера перезагружает страницу из ее кеша.

С trueпараметром

<button type="button" onclick="location.reload(true);">Reload page</button>

С default/ falseпараметр

 <button type="button" onclick="location.reload();">Reload page</button>

Использование jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

8

Вам не нужно ничего из jQuery, чтобы перезагрузить страницу, используя чистый JavaScript , просто используйте функцию reload для свойства location следующим образом:

window.location.reload();

По умолчанию это перезагрузит страницу, используя кеш браузера (если существует) ...

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

window.location.reload(true);

Также, если вы уже находитесь в области видимости окна , вы можете избавиться от окна и сделать:

location.reload();

8

использование

location.reload();

или

window.location.reload();

ОП упоминал конкретно «с jQuery» (хотя, как уже отмечалось многими, это, возможно, не должно быть вопросом jQuery)
RomainValeri

3

Используйте onclick="return location.reload();"в теге кнопки.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

3

Если вы используете jQuery и хотите обновить, попробуйте добавить свой jQuery в функцию javascript:

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

Я попробовал следующее:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

Смешивание простого Jane Javascript с вашим JQuery должно работать.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

3

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

jQuery - это кроссплатформенная библиотека JavaScript, предназначенная для упрощения клиентских сценариев HTML.

~ Википедия ~

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

Но если вам нужна Решение, вот один.

$(location).attr('href', '');

2

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

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

2
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Уже есть несколько ответов, предлагающих это.
Дхарман

Удивительно, это также обновление с сервера
Alemoh Rapheal Baja



1

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

location.reload(); //simple refresh

И еще один называется жестким обновлением . Здесь вы передаете логическое выражение и устанавливаете его в true. Это перезагрузит страницу, уничтожив старый кеш и отобразив содержимое с нуля.

location.reload(true);//hard refresh

1
Ответы только на код обычно не одобряются на этом сайте. Не могли бы вы отредактировать свой ответ, включив в него некоторые комментарии или пояснения к коду? Объяснения должны отвечать на такие вопросы, как: Что это делает? Как это сделать? Куда это идет? Как это решает проблему ОП? Смотрите: Как ответить . Спасибо!
Эдуардо Байтелло



-1

Вот несколько строк кода, которые вы можете использовать для перезагрузки страницы с помощью jQuery .

Он использует оболочку jQuery и извлекает нативный элемент dom.

Используйте это, если вы просто хотите почувствовать jQuery в своем коде и вам не безразлична скорость / производительность кода.

Просто выберите от 1 до 10, который соответствует вашим потребностям, или добавьте еще несколько, основываясь на схеме и ответах перед этим.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.