Як я можу оновити сторінку за допомогою jQuery?

Як я можу оновити сторінку за допомогою jQuery?

Використання location.reload():

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

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

Це має працювати у всіх браузерах навіть без jQuery:

location.reload();

Існує кілька необмежених способів оновлення сторінки за допомогою 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.

Ви можете продовжити список творчих:

• window.location = window.location
• window.self.window.self.window.window.location = window.location
• ... та іншими 534 способами

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>

Думаю, багато способів спрацюють:

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

Щоб перезавантажити сторінку за допомогою jQuery, виконайте:

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

Підхід тут, який я використав, був Ajax jQuery. Я перевірив його на Chrome 13. Потім я поклав код в обробник, який спровокує перезавантаження. URL є "", що означає цю сторінку .

Якщо поточна сторінка була завантажена запитом POST, ви можете скористатися

window.location = window.location.pathname;

замість

window.location.reload();

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

Питання має бути,

Як оновити сторінку за допомогою JavaScript

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

Ви зіпсовані на вибір.

Ви можете скористатися

location.reload(forceGet)

forceGet є булевим і необов'язковим.

За замовчуванням є false, що перезавантажує сторінку з кеша.

Встановіть цей параметр у значення true, якщо ви хочете змусити браузер отримати сторінку від сервера, щоб також позбутися кеша.

Або просто

location.reload()

якщо ви хочете швидко та легко кешувати.

Три підходи з різною поведінкою кеша:

• 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() щоб достовірно відтворити ефект користувача, натиснувши кнопку 'оновити'.

window.location.reload() перезавантажиться з сервера і знову завантажить усі ваші дані, сценарії, зображення тощо.

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

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

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

Оскільки питання є загальним, спробуємо підсумувати можливі варіанти відповіді:

Просте звичайне рішення JavaScript :

Найпростіший спосіб - це однорядне рішення, розміщене відповідним чином:

location.reload();

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

Метод Location.reload () перезавантажує ресурс із поточної URL-адреси. Його необов'язковий унікальний параметр - булевий, який, коли це правда, призводить до того, що сторінка завжди буде завантажена з сервера. Якщо вона помилкова або не вказана, браузер може перезавантажити сторінку зі свого кешу.

Це означає, що існують два способи:

Рішення1: змусити перезавантажити поточну сторінку з сервера

location.reload(true);

Рішення2: перезавантаження з кешу чи сервера (на основі браузера та конфігурації)

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

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

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

Ось рішення, яке асинхронно перезавантажує сторінку за допомогою 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
• Використовуйте про http-equiv="refresh"всяк випадок, коли щось не піде з помилкою javascript / сервера, тоді ця сторінка НЕПОЗАЄ перезавантажиться, не отримуючи телефонний дзвінок
• Такий підхід, мабуть, просочує пам'ять якось, http-equivоновлення виправляє це

я знайшов

window.location.href = "";

або

window.location.href = null;

також робить оновлення сторінки.

Це значно спрощує перезавантаження сторінки, видаляючи будь-який хеш. Це дуже приємно, коли я використовую AngularJS в тренажері iOS, так що мені не доведеться повторювати додаток.

Ви можете використовувати метод 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>

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

window.location.reload();

За замовчуванням це перезавантажить сторінку за допомогою кешу браузера (якщо існує) ...

Якщо ви хочете змусити перезавантажити сторінку, просто передайте справжнє значення для способу перезавантаження, як показано нижче ...

window.location.reload(true);

Крім того, якщо ви вже знаходитесь в області вікон , ви можете позбутися від вікна і зробити:

location.reload();

використання

location.reload();

або

window.location.reload();

Використовуйте onclick="return location.reload();"в тезі кнопок.

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

Якщо ви використовуєте jQuery і хочете оновити, спробуйте додати jQuery у функцію javascript:

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

Я спробував таке:

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

Змішування простого javascript 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);

Усі відповіді тут хороші. Оскільки питання вказує на перезавантаження сторінкиjquery, Я просто думав додати щось більше для майбутніх читачів.

jQuery - це міжплатформна бібліотека JavaScript, призначена для спрощення сценаріїв HTML на стороні клієнта.

^{~ Вікіпедія ~}

Так ви зрозумієте, що фундамент jquery, або jquery ґрунтується на javascript. Так що йти з чистимjavascript це спосіб краще, якщо мова йде про прості речі.

Але якщо вам потрібно jquery рішення, ось одне.

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

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

    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

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

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

Просте рішення Javascript:

 location = location; 

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

Мабуть, найкоротший (12 символів) - історія використання

history.go()

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

location.reload(); //simple refresh

А ще називається жорстке оновлення . Тут ви передаєте булевий вираз і встановлюєте його в true. Це перезавантажить сторінку, знищивши старіший кеш і відобразивши вміст з нуля.

location.reload(true);//hard refresh

Він найкоротший у JavaScript.

window.location = '';

$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

Ось кілька рядків коду, якими ви можете скористатися для перезавантаження сторінки за допомогою 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>