如何使用jQuery刷新页面?


2452

如何使用jQuery刷新页面?


29
由于jQuery是用于轻松进行DOM操作和事件绑定的JavaScript框架,因此我建议您使用JavaScript而不是jQuery。
2014年

19
您不需要jQuery。
星尘

13
比以往任何时候都更加相关:Needsmorejquery.com
Kartik Chugh,

@Stardust您不需要使用jQuery就能完成任何事情,因为只要有jQuery,JavaScript就可以将它变成可能。
我是最愚蠢的人

Answers:


3826

用途location.reload()

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

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


29
这对我不起作用。但这有效:window.location.href = window.location.href;
Yster

5
这对我不起作用。 window.location.href=window.location.href;location.href=location.href;工作。
twhar​​mon

23
window.location.reload(true);将很难刷新,否则默认情况下为假
Sagar Naliyapara

@Sagar N,这对我也有用。谢谢。最近几天,我用不同的方法进行了艰苦的尝试,但是您的解决方案救了我。
Ludus H

快跑window.location.reload()

457

即使没有jQuery,这也应适用于所有浏览器:

location.reload();

449

多种使用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)

    如果需要再次从Web服务器提取文档(例如,文档内容动态变化的地方),则将参数传递为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>


10
列表和jsfiddle +1。我有一个问题,在jsfiddle 1和jsfiddle 6中,使生成的页面在重新加载时消失一会儿,而2-5使页面重新加载变得“不明显”。在chrome开发工具中,我可以看到页面正在重新生成,但是您能否解释一下重新绘制过程有所不同吗?请。先感谢您。
2013年

@Cԃաԃ我没什么区别...也许是缓存问题?我会尽快看看。
尼卡比曹

2
1和6 (reload()/(false))较慢。嗯。有趣。:)以及1和6与reload()默认参数相同false
2013年

location.href = location.href是我通常使用的,但感谢其他人。很有用!+1
Amal Murali

1
@Cԃաԃ最后,我可以复制您看到的内容,并在这里询问。
尼卡比曹

202

我想有很多方法可以起作用:

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

41
window.location.href=window.location.href;将做什么,如果你的URL对最终A#/ hashbang example.com/something#blah
AaronLS

18
如果有人想知道location.reload()和之间的区别history.go(0)是什么,那就没有了。的HTML 5规范的相关部分w3.org/TR/html5/browsers.html#dom-history-go明确地决定了它们是等效的:“当go(delta)被调用方法中,如果参数的方法进行省略或具有如果值为零,则用户代理必须像location.reload()调用该方法一样起作用。”
Mark Amery

唯一对我有用的就是这个:window.location.href = window.location.href;
Yster

123

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

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

我在这里使用的方法是Ajax jQuery。我在Chrome 13 上进行了测试。然后将代码放入处理程序中,该处理程序将触发重新加载。该URL"",这意味着这个页面


68
投票失败。这并不能真正回答问题,而是显示了如何用Ajax响应替换页面的HTML。这与重新加载页面不同:例如,我正在处理一种无法解决原始问题的情况。
Marnen Laibow-Koser 2012年

5
像这样重新加载整个HTML的一个麻烦是必须手动调用onload / ready事件,并减轻先前声明的变量的覆盖,这些变量在刷新后可能希望保留其状态。
PassKit 2013年

3
除非您对代码非常谨慎,否则这导致在附加事件处理程序的地方发生内存泄漏,而在替换它们所附加的代码之前不会分离它们。
Daniel Llewellyn

我正在使用它每秒重新加载仪表板,零闪烁!这是可怜的人的彗星/ JSON API。感谢@DanielLlewellyn等。警告。
William Entriken'2

3
少数人评论说,此方法仅刷新页面的一部分很有用。不是。我认为这些人误会了context参数,$.ajax并期望它以某种方式执行某种魔术。它所做的只是设置this回调函数的值。网址为的Ajax ""会命中您当前使用的网址,从而通常会加载完整的HTML(包括<html><head><body>),并且此答案中的任何内容都不会过滤掉您不需要的内容。
Mark Amery 2015年

107

如果当前页面是通过POST请求加载的,则可能要使用

window.location = window.location.pathname;

代替

window.location.reload();

因为window.location.reload()如果在由POST请求加载的页面上调用,则会提示您进行确认。


12
但是,这将丢失查询字符串,而window.location = window.location不会
mrmillsy

window.location = window.location但是@mrmillsy 也不完美;如果当前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-sinceif-none-match在请求中标头。

    等效于用户在可能的情况下在浏览器中执行“硬重装”。

    请注意,在Firefox(请参阅MDN)和Internet Explorer(请参阅MSDN)中支持传递true到,但不被普遍支持,也不属于location.reload(),也不是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中存在散列,则无法使用。对于使用fragids的任何网站-甚至对于有人链接到页面可能会在URL上添加fragid的任何网站-都会使其失效。
Mark Amery

26

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

因此,如果您只想刷新HTML,它们window.location = document.URL将以更快的速度返回并且流量更少。但是,如果URL中包含井号(#),它将不会重新加载页面。


至少在Chrome中,这种行为是正确的- location.reload()即使没有参数也可以强制重新验证缓存的资源,同时window.location = document.URL很高兴在不影响服务器的情况下只要不刷新就可以提供缓存的资源。
Mark Amery


16

由于这个问题很笼统,让我们尝试总结答案的可能解决方案:

简单的普通JavaScript解决方案

最简单的方法是以适当的方式放置一线解决方案:

location.reload();

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

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

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直接使用like $.get('',function(data){$(document.body).html(data)}) 会导致css / js文件被缓存破坏,即使您使用cache: true,这也是我们使用的原因parseHTML
  • parseHTML找不到body标签所以您的整个身体需要再增加一个格,我希望这一点知识有一天能对您有所帮助,您可以猜测我们如何为此选择IDdiv
  • http-equiv="refresh"如果万一javascript / server打h出现问题,请使用此方法,然后页面仍会重新加载,而您不会接到电话
  • 这种方法可能会以某种方式泄漏内存,http-equiv刷新修复了

14

我发现

window.location.href = "";

要么

window.location.href = null;

还可以刷新页面。

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


不错的拍摄,我没有意识到。
Junaid Atari

9

您可以使用 JavaScript location.reload() 方法。此方法接受布尔参数。truefalse。如果参数为 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重新加载页面,只需对location属性使用reload函数,如下所示:

window.location.reload();

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

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

window.location.reload(true);

另外,如果您已经在window作用域内,则可以摆脱window并执行以下操作:

location.reload();

8

采用

location.reload();

要么

window.location.reload();

OP特别提到了“使用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并希望刷新,请尝试在javascript函数中添加jQuery:

我想在单击oh an时从页面中隐藏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>

已经很少有答案表明这一点。
Dharman

令人敬畏的是,这也从服务器进行了更新
Alemoh Rapheal Baja

1

简单的Javascript解决方案:

 location = location; 

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



1

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

location.reload(); //simple refresh

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

location.reload(true);//hard refresh

1
在此网站上,通常仅回答代码问题。您能否编辑您的答案以包含一些对代码的注释或解释?解释应回答以下问题:它是做什么的?它是如何做到的?去哪儿了?它如何解决OP的问题?请参阅:如何anwser。谢谢!
Eduardo Baitello



-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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.