it-swarm.com.ru

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

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

2185
luca

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

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

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

3519
Roy

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

location.reload();
429
Thorben

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

390
Ionică Bizău

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

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

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

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

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

117
Peter

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

window.location = window.location.pathname;

вместо

window.location.reload();

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

100
SumairIrshad

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

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

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

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

59
JohnP

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

location.reload(forceGet)

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

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

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

Или просто

location.reload()

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

51
Pinch

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

  • 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-адрес страницы не содержит фрагмента/хэшбэнг!

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

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

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

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

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

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

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

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

23
user762330

Функция jQuery Load также может выполнять обновление страницы:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
15
Suleman Mirza

Вот решение, которое асинхронно перезагружает страницу, используя 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 исправляет это
13
William Entriken

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

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

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

location.reload();

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

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

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

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

location.reload(true);

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

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

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

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

Я нашел

window.location.href = "";

или же

window.location.href = null;

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

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

11
Mujah Maskey

Вы можете использовать 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>
5
Poorna Senani Gamage

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

window.location.reload();

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

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

window.location.reload(true);

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

location.reload();
5
Alireza

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

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

~ Википедия ~

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

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

$(location).attr('href', '');
2
Roshana Pitigala

Если вы используете 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);
2
J. Moreno

Простое решение Javascript:

 location = location; 

<button onClick="location = location;">Reload</button>

1
hev1

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

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

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

location.reload();

или же

window.location.reload();
1
H.Ostwal

Вот несколько строк кода, которые вы можете использовать для перезагрузки страницы используя 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>
0
David Angulo

Это самый короткий в JavaScript.

location = '';
0
Na Nonthasen

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

document.location.reload();
0
GameMaster