如何使用 jQuery 刷新页面？答案

【问题标题】：How can I refresh a page with jQuery?如何使用 jQuery 刷新页面？
【发布时间】：2011-07-21 06:18:07
【问题描述】：

如何使用 jQuery 刷新页面？

【问题讨论】：

由于 jQuery 是一个用于简单 DOM 操作和事件绑定的 javascript 框架，我建议您使用 javascript 而不是 jQuery。
你不需要 jQuery。
比以往任何时候都更相关：needsmorejquery.com
@Stardust 你不需要 jQuery 来做任何你用 jQuery 做的事情，因为如果你能用 jQuery 做的话，用 JavaScript 一切皆有可能。

【解决方案1】：

使用location.reload():

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

reload() 函数采用一个可选参数，该参数可以设置为true，以强制从服务器而不是缓存重新加载。该参数默认为false，因此默认情况下页面可能会从浏览器的缓存中重新加载。

【讨论】：

这对我不起作用。这虽然有效：window.location.href=window.location.href;
这对我不起作用。 window.location.href=window.location.href; 和 location.href=location.href; 工作。
window.location.reload(true); 会硬刷新，否则默认为false
@Sagar N，这也适用于我。谢谢你。过去几天我尝试了不同的方法，但你的解决方案救了我。
@FaridAbbas location.reload(); 是标准的 javascript。你不需要 jQuery。

【解决方案2】：

有多种无限的方式来用JavaScript刷新页面：

location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)

如果我们需要从再次访问网络服务器（例如文档内容的位置动态变化）我们会将参数传递为true。

您可以继续创作列表：

window.location = window.location
window.self.window.self.window.window.location = window.location
...and other 534 ways

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;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

+1 表示列表和 jsfiddle。我有一个问题，在 jsfiddle 1 和 6 中，使生成的页面在重新加载时消失片刻，而 2-5 使页面重新加载“不明显”。在 chrome 的开发工具中，我可以看到页面正在重新生成，但你能解释一下重绘过程的不同吗？请。提前谢谢你。
@Cԃաԃ 我看不出有什么区别...也许缓存是问题？我很快就会去看看。
1 和 6 (reload()/(false)) 较慢。嗯。有趣的。 :) 和1和6一样reload()的默认参数是false。
location.href = location.href 是我通常使用的，但感谢其他人。很有用！ +1
@Cԃաԃ 最后我可以重现你所看到的，我问了here。

【解决方案3】：

即使没有 jQuery，这也应该适用于所有浏览器：

location.reload();

【讨论】：

如果您想知道它的支持程度，这里是Can I use?

【解决方案4】：

我想很多方法都行：

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

【讨论】：

如果您的 URL 末尾有 #/hashbang example.com/something#blah，则此 window.location.href=window.location.href; 将什么都不做：
如果有人想知道location.reload() 和history.go(0) 之间的区别是什么：没有。 w3.org/TR/html5/browsers.html#dom-history-go 的 HTML 5 规范的相关部分明确指出它们是等价的：“当调用 go(delta) 方法时，如果该方法的参数被省略或值为 0，则用户代理必须就像调用了 location.reload() 方法一样。"
唯一对我有用的是这个：window.location.href=window.location.href;
window.location.href=window.location.href 为我工作

【解决方案5】：

要使用 jQuery 重新加载页面，请执行以下操作：

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

我在这里使用的方法是 Ajax jQuery。我在Chrome 13 上对其进行了测试。然后我将代码放入将触发重新加载的处理程序中。 URL 是""，表示此页面。

【讨论】：

投反对票。这并没有真正回答问题，而是展示了如何用 Ajax 响应替换页面的 HTML。这与重新加载页面不同：例如，我现在正在处理一种情况，这无法解决最初的问题。
像这样重新加载整个 HTML 的一个问题是必须手动调用 onload/ready 事件并减轻对之前声明的变量的覆盖，您可能希望在刷新后保留其状态。
除非您对代码非常小心，否则这将在您附加事件处理程序的地方导致内存泄漏，并且在替换它们附加的代码之前没有分离它们到。
我正在使用它每秒重新加载我们的仪表板，零闪烁！这是穷人的彗星/json api。感谢@DanielLlewellyn 等人。警告。
一些人评论说这种方法对于只刷新页面的一部分很有用。它不是。我认为那些人误解了$.ajax 的context 参数并期望它以某种方式执行某种魔术。它所做的只是set the this value of callback functions。对"" 的 URL 的 Ajax 将访问您当前所在的 URL，因此通常会加载完整的 HTML（包括 <html> 和 <head> 和 <body>），并且此答案中的任何内容都不会过滤掉您不使用的内容不想。

【解决方案6】：

如果当前页面是由 POST 请求加载的，您可能需要使用

window.location = window.location.pathname;

而不是

window.location.reload();

因为如果在由 POST 请求加载的页面上调用window.location.reload()，将提示确认。

【讨论】：

然而，这将丢失查询字符串，而 window.location = window.location 不会
然而，@mrmillsy window.location = window.location 也不完美；如果当前 URL 中有一个脆弱（hashbang），它什么也不做。

【解决方案7】：

问题应该是，

如何使用 JavaScript

刷新页面

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

你被宠坏了。

【讨论】：

【解决方案8】：

你可能想使用

location.reload(forceGet)

forceGet 是一个布尔值和可选值。

默认为 false，从缓存中重新加载页面。

如果您想强制浏览器从服务器获取页面以摆脱缓存，请将此参数设置为 true。

或者只是

location.reload()

如果您想快速轻松地使用缓存。

【讨论】：

【解决方案9】：

具有不同缓存相关行为的三种方法：

location.reload(true)

在实现location.reload() 的forcedReload 参数的浏览器中，通过获取页面及其所有资源（脚本、样式表、图像等）的新副本来重新加载。不会从缓存中提供任何资源 - 从服务器获取新副本，而不在请求中发送任何 if-modified-since 或 if-none-match 标头。

相当于用户在可能的情况下在浏览器中进行“硬重新加载”。

请注意，Firefox（请参阅MDN）和 Internet Explorer（请参阅MSDN）支持将true 传递给location.reload()，但并非普遍支持，并且不是the W3 HTML 5 spec 的一部分，也不是the W3 draft HTML 5.1 spec ，也不是the WHATWG HTML Living Standard。

在不支持的浏览器（如 Google Chrome）中，location.reload(true) 的行为与 location.reload() 相同。
location.reload() 或 location.reload(false)

重新加载页面，获取页面 HTML 本身的新的、未缓存的副本，并对浏览器缓存的任何资源（如脚本）执行 RFC 7234 重新验证请求，即使它们是 @987654327 @ 是 RFC 7234 允许浏览器在不重新验证的情况下为它们提供服务。

据我所知，在执行location.reload() 调用时浏览器应该如何利用其缓存的确切方式尚未指定或记录；我通过实验确定了上述行为。

这相当于用户只需在浏览器中按下“刷新”按钮。
location = location（或无数其他可能的技术，涉及分配给location 或其属性）

仅当页面的 URL 不包含脆弱/hashbang 时才有效！

重新加载页面而不从缓存中重新获取或重新验证任何 fresh 资源。如果页面的 HTML 本身是新的，这将重新加载页面而不执行任何 HTTP 请求。

这相当于（从缓存的角度来看）用户在新选项卡中打开页面。

但是，如果页面的 URL 包含哈希，这将无效。

同样，据我所知，这里的缓存行为是未指定的；我是通过测试确定的。

所以，总而言之，你想使用：

location = location 最大限度地利用缓存，只要页面的 URL 中没有散列，在这种情况下，这将不起作用
location.reload(true) 无需重新验证即可获取所有资源的新副本（尽管它并未得到普遍支持，并且在某些浏览器（如 Chrome）中与 location.reload() 的行为没有什么不同）
location.reload() 忠实再现用户点击“刷新”按钮的效果。

【讨论】：

+1 表示位置 = 位置；似乎没有多少人建议它，尽管它比提供的大多数答案都短，唯一的缺点是我猜它的可读性，而 location.reload() 更具语义
@Brandito 更重要的是，如果 URL 中有哈希，location = location 将不起作用。对于任何使用 fragids 的网站 - 甚至对于任何链接到页面的人可能会在 URL 中添加 fragid 的网站 - 这都会使其损坏。

【解决方案10】：

window.location.reload() 将从服务器重新加载，并再次加载您的所有数据、脚本、图像等。

因此，如果您只是想刷新 HTML，window.location = document.URL 将返回更快且流量更少。但如果 URL 中有井号 (#)，则不会重新加载页面。

【讨论】：

这种行为在 Chrome 中是正确的，至少 - location.reload() 强制重新验证缓存资源，即使没有参数，而 window.location = document.URL 很乐意提供缓存资源而无需访问服务器，只要它们'重新新鲜。

【解决方案11】：

jQueryLoad函数也可以进行页面刷新：

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

【讨论】：

不，这不是页面刷新。

【解决方案12】：

由于问题很笼统，让我们尝试总结一下可能的答案：

简单的纯 JavaScript 解决方案：

最简单的方法是以适当的方式放置单行解决方案：

location.reload();

很多人在这里缺少的，因为他们希望得到一些“点”，是 reload() 函数本身提供了一个布尔值作为参数（详情：https://developer.mozilla.org/en-US/docs/Web/API/Location/reload）。

Location.reload() 方法从当前重新加载资源网址。它的可选唯一参数是一个布尔值，当它是 true，导致页面总是从服务器重新加载。如果是 false 或未指定，浏览器可能会从其重新加载页面缓存。

这意味着有两种方法：

解决方案1：强制从服务器重新加载当前页面

location.reload(true);

解决方案2：从缓存或服务器重新加载（基于浏览器和您的配置）

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

如果你想将它与 jQuery 结合起来监听事件，我建议使用“.on()”方法而不是“.click”或其他事件包装器，例如更合适的解决方案是：

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

【讨论】：

【解决方案13】：

这是一个使用 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)})causes css/js files to get cache-busted一样，即使你使用cache: true，这也是我们使用parseHTML的原因
parseHTML will NOT find a body tag 所以你的整个身体需要进入一个额外的 div，我希望这块知识有一天能帮助你，你可以猜到我们是如何选择 id 的 div
使用 http-equiv="refresh" 以防 javascript/服务器出现问题，然后页面仍会在您没有接到电话的情况下重新加载
这种方法可能会以某种方式泄漏内存，http-equiv 刷新修复了该问题

【讨论】：

【解决方案14】：

我找到了

window.location.href = "";

或

window.location.href = null;

还会刷新页面。

这使得重新加载页面删除任何哈希变得非常容易。当我在 iOS 模拟器中使用 AngularJS 时，这非常好，这样我就不必重新运行应用程序了。

【讨论】：

拍得不错，我不知道。

【解决方案15】：

您可以使用 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>

【讨论】：

【解决方案16】：

您不需要任何来自 jQuery 的东西，要使用 纯 JavaScript 重新加载页面，只需在 location 属性上使用 reload 函数，如下所示：

window.location.reload();

默认情况下，这将使用浏览器缓存（如果存在）重新加载页面...

如果您想强制重新加载页面，只需将 true 值传递给重新加载方法，如下所示...

window.location.reload(true);

此外，如果您已经在 window 范围，您可以摆脱 window 并执行以下操作：

location.reload();

【讨论】：

【解决方案17】：

使用

location.reload();

或

window.location.reload();

【讨论】：

OP 特别提到“使用 jQuery”（尽管很多人已经指出，这可能 不应该不是一个 jQuery 问题）

【解决方案18】：

在按钮标签中使用onclick="return location.reload();"。

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

【讨论】：

【解决方案19】：

如果您正在使用 jQuery 并且想要刷新，请尝试在 javascript 函数中添加您的 jQuery：

我想在单击 h3 时从页面中隐藏 iframe，对我来说它有效，但我无法单击允许我开始查看 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);

【讨论】：

【解决方案20】：

这里的所有答案都很好。由于问题指定使用 jquery 重新加载页面，我只是想为未来的读者添加更多内容。

jQuery 是一个跨平台的 JavaScript 库，旨在简化 HTML 的客户端脚本。

^~Wikipedia~

所以您会明白jquery 或jquery 的基础是基于javascript。因此，对于简单的事情，使用纯 javascript 会更好。

但如果您需要jquery 解决方案，这里有一个。

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

【讨论】：

【解决方案21】：

有很多方法可以重新加载当前页面，但是以某种方式使用这些方法，您可以看到页面已更新，但缓存值不会很少，因此请克服该问题，或者如果您希望提出硬请求，请使用以下代码.

    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

【讨论】：

【解决方案22】：

您可以用两种方式编写它。第一种是重新加载页面的标准方式，也称为简单刷新

location.reload(); //simple refresh

还有一个叫做硬刷新。在这里，您传递布尔表达式并将其设置为 true。这将重新加载页面，破坏旧缓存并从头开始显示内容。

location.reload(true);//hard refresh

【讨论】：

仅代码的答案在本网站上通常不受欢迎。您能否编辑您的答案以包含一些 cmets 或对您的代码的解释？解释应该回答这样的问题：它有什么作用？它是如何做到的？它去哪儿了？它如何解决OP的问题？请参阅：How to anwser。谢谢！

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

简单的 Javascript 解决方案：

 location = location;

&lt;button onClick="location = location;"&gt;Reload&lt;/button&gt;

【讨论】：

【解决方案25】：

可能最短（12 个字符） - 使用 history

history.go()

【讨论】：

【解决方案26】：

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

【讨论】：

【解决方案27】：

你可能需要使用

 location.reload()

或者也可能需要使用

location.reload(forceGet)

forceGet 是一个布尔值和可选值。

如果您想强制浏览器从服务器获取页面以清除缓存，请将此参数设置为 true

【讨论】：

【解决方案28】：

在 JavaScript 中最短。

window.location = '';

【讨论】：

【解决方案29】：

你们可能需要使用

    location.reload(forceGet)

forceGet 是一个布尔值和可选值。

默认为false，重新加载缓存的页面。

【讨论】：

【解决方案30】：

这对我有用。

function reload(){
    location.reload(true);
}

【讨论】：

如何使用 jQuery 刷新页面？

`location.reload(true)`

`location.reload()` 或 `location.reload(false)`

`location = location`（或无数其他可能的技术，涉及分配给`location` 或其属性）

location.reload(true)

location.reload() 或 location.reload(false)

location = location（或无数其他可能的技术，涉及分配给location 或其属性）

`location.reload(true)`

`location.reload()` 或 `location.reload(false)`

`location = location`（或无数其他可能的技术，涉及分配给`location` 或其属性）