使用JavaScript或HTML刷新页面

256

如何使用JavaScript或HTML刷新页面?


25
谷歌的第一页搜索结果已经回答了你的问题。 - stefan
5
这样的问题应该关闭。鼓励用户先进行简单的搜索,并鼓励阅读。 - amosrivera
36
根据此问题的赞成票与反对票之比,有一大批用户默默支持在Stackoverflow上寻找这类问题的答案。 - Chris Dutrow
49
感谢谷歌将我(以及成千上万的其他人)带到这里 - 寻找最佳答案。 - Brent Bradburn
11
很遗憾,当你在Google搜索“通过JS自动刷新页面”时,这个页面是第一个出现的,所以不回答这里有点无意义 :) - Alar
显示剩余2条评论
8个回答

351

window.location.reload(); 在 JavaScript 中使用。

<meta http-equiv="refresh" content="1"> 在 HTML 中使用(其中 1 表示 1 秒)。


285

以下是使用 JavaScript 重新加载页面的 535 种方法,非常酷:

以下是前 20 种:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)

并且最后10个:

self['location']['replace'](self.location['href'])
location.reload()
location['reload']()
window.location.reload()
window['location'].reload()
window.location['reload']()
window['location']['reload']()
self.location.reload()
self['location'].reload()
self.location['reload']()
self['location']['reload']()

原始文章


122
不,我没有测试它们全部。 - epoch
16
如果你将window.location设置为一个变量(而不是执行函数),当地址栏中有#哈希值时,页面不会刷新,而是只会滚动到该ID所在的位置(如果存在的话)。 - Arve Systad
8
那个列表中很多条目只是相同的东西,使用不同的语法表示,比如用[].访问对象属性。 - RozzA
哪个是最好的,还有跨浏览器支持怎么样(包括IE4兼容性)? ;) - Kamil Kiełczewski
1
但是缺少 window.history.go(0) ;) - Taufik Nur Rahmanda
显示剩余10条评论

87

只需使用...

location.reload(true/false);
如果为假,则页面将从缓存中重新加载,否则从服务器重新加载。

19
重新加载来自缓存的页面的默认值是false - Nabi K.A.Z.
4
这个答案让我的一天变得美好,更确切地说是我的晚上......我遇到了一个问题,使用location.reload()时发现有些模态窗口停留在之前的状态。解决方案是使用location.reload(true);,因为默认值确实是false,就像Nabi K.A.Z.所说的那样。非常感谢您... - Canelo Digital
2
现在已经过时了,请使用 window.location.reload() 代替。 - TD1
2
请注意:这将重新提交表单。 - Elia Weiss

17
window.location.reload()

这应该有效,不过还有很多不同的选项,比如:

window.location.href=window.location.href

"window.location.href=window.location.href" 看起来不再起作用了。 - dawsnap

13

您也可以使用

<input type="button" value = "Refresh" onclick="history.go(0)" />

对我来说它很好用。


3
请注意:这将重新提交表单。 - Elia Weiss

6

使用:

window.location.reload();

2
如果涉及到在缓存页面上控制更新,我有一个不错的方法来实现。
  • 添加一些JavaScript代码到页面中,在加载时始终获取页面版本号的字符串(Ajax)。例如:www.yoursite.com/page/about?getVer=1&__[date]
  • 将其与存储的版本号(存储在cookie或localStorage中)进行比较,如果用户已经访问过该页面,则直接存储。
  • 如果版本与本地版本不同,请使用window.location.reload(true)刷新页面
  • 您将看到页面上所做的任何更改。

即使不需要请求,此方法也至少需要一个请求,因为它已经存在于本地浏览器缓存中。但是与完全不使用缓存相比,开销要小得多(以确保页面显示正确的更新内容)。这仅需要每个页面请求的几个字节,而不是每个页面的所有内容。

重要提示:必须在您的服务器上实现版本信息请求,否则它将返回整个页面。

www.yoursite.com/page/about?getVer=1&__[date]返回版本字符串的示例: skg2pl-v8kqb

以下是我的库的一部分代码示例(我认为您可能无法使用它,但也许可以给您提供一些实现思路):

o.gCheckDocVersion = function() // Because of the hard caching method, check document for changes with ajax 
{
  var sUrl = o.getQuerylessUrl(window.location.href),
      sDocVer = o.gGetData( sUrl, false );

  o.ajaxRequest({ url:sUrl+'?getVer=1&'+o.uniqueId(), cache:0, dataType:'text' }, 
                function(sVer)
                {
                   if( typeof sVer == 'string' && sVer.length )
                   {
                     var bReload = (( typeof sDocVer == 'string' ) && sDocVer != sVer );
                     if( bReload || !sDocVer )
                      { 
                        o.gSetData( sUrl, sVer ); 
                        sDocVer = o.gGetData( sUrl, false );
                        if( bReload && ( typeof sDocVer != 'string' || sDocVer != sVer ))
                         { bReload = false; }
                      }
                     if( bReload )
                      {  // Hard refresh page contents
                        window.location.reload(true); }
                   }
                }, false, false );
};

如果您正在使用版本独立的资源,例如JavaScript或CSS文件,请添加版本号(通过URL重写实现,而不是查询,因为它们大多数情况下不会被缓存)。例如:www.yoursite.com/ver-01/about.js
对我来说,这种方法非常有效,也许对您也有帮助。

-6

试试这个,运行良好。

jQuery("body").load(window.location.href);

为什么要踩我? - Muhammad Waqas
4
可能是因为原帖作者要求提供 JavaScript 方法,而你提供了 JQuery 方法。 - Barry Michael Doyle
4
除了效率极低外,它甚至不会刷新页面... - Emile Bergeron

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接