JavaScript硬刷新当前页面

我怎么能迫使web浏览器做一个硬刷新的页面通过JavaScript?< br > 硬刷新意味着获取页面的新副本，并刷新所有外部资源(图像，JavaScript, CSS等)

229058 次浏览
小开
最佳答案

试着使用:

location.reload(true);

当此方法接收到true值作为参数时，它将导致页面总是从服务器重新加载。如果为false或未指定，浏览器五月将从缓存中重新加载页面。

更多信息:

小开 
window.location.href = window.location.href
小开

对于angular用户和在这里，你可以这样做:

<form [action]="myAppURL" method="POST" #refreshForm></form>

import { Component, OnInit, ViewChild } from '@angular/core';


@Component({
// ...
})
export class FooComponent {
@ViewChild('refreshForm', { static: false }) refreshForm;


forceReload() {
this.refreshForm.nativeElement.submit();
}
}

它工作的原因在这个网站上有解释:https://www.xspdf.com/resolution/52192666.html

在本文中，您还将了解到硬重载是如何为每个框架工作的

解释:角

Location: reload()， Location.reload()方法重载当前URL，就像Refresh按钮一样。只使用location.reload();如果你想执行强制重载(例如使用Ctrl + F5)来重载服务器而不是浏览器缓存中的所有资源，这不是一个解决方案。这个问题的解决方案是，执行一个POST请求到当前位置，因为这总是使浏览器重新加载所有内容。

小开

上面接受的答案不再做任何事情，除了在大多数新版本的web浏览器上正常重新加载。我已经尝试了我最近更新的Chrome所有这些，包括location.reload(true)， location.href = location.href，和<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />。没有一个成功。

我的解决方案是通过使用服务器端功能将非重复查询字符串附加到所有包含的源文件引用，如下例所示。

<script src="script.js?t=<?=time();?>"></script>

因此，您还需要动态地控制何时保留以前的文件，何时更新它。唯一的问题是，当文件包含通过脚本由插件执行时，你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时，它将自动被垃圾收集。

小开

使用搜索参数更改当前URL将导致浏览器将相同的参数传递给服务器，换句话说，这将强制刷新。

(不过，如果你对Service Worker使用拦截，就不保证了。)

  const url = new URL(window.location.href);
url.searchParams.set('reloadTime', Date.now().toString());
window.location.href = url.toString();

如果你想支持旧浏览器:

if ('URL' in window) {
const url = new URL(window.location.href);
url.searchParams.set('reloadTime', Date.now().toString());
window.location.href = url.toString();
} else {
window.location.href = window.location.origin
+ window.location.pathname
+ window.location.search
+ (window.location.search ? '&' : '?')
+ 'reloadTime='
+ Date.now().toString()
+ window.location.hash;
}

也就是说，强制刷新所有CSS和JS有点费力。你会想要做同样的过程，为<script>中的所有src属性和<link>中的href添加一个searchParam。这就是说它不会卸载当前的JS，但对CSS工作很好。

document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));

我不会使用JS示例，因为它可能只会导致问题。

你可以通过在编译HTML时在JS和CSS链接中添加时间戳作为搜索参数来避免这种麻烦。

小开

当前页面硬刷新。把它放在<body>的末尾:

<script>


var t = parseInt(Date.now() / 10000)


function addQuery(tag) {
const url = new URL(tag.href || tag.src);
url.searchParams.set('r', t.toString());
tag.href = url.toString();
}


function refresh() {
var x = localStorage.getItem("t");
localStorage.setItem("t", t);
if (x != t) addQuery(window.location)
else {
var a = document.querySelectorAll("a")
var n = a.length
while(n--) addQuery(a[n])
}
}


refresh()


</script>

这是一个工作代码从我的主页，做一个强制刷新每个访问者，以便任何更新将显示没有现金问题。

扩展到querySelectorAll("script, style, img, a")有一个问题:querySelectorAll之后的标签没有被解析，而querySelectorAll之前的script, style和img标签已经加载或正在加载。只有a标记尚未加载。

x最后一次刷新被存储在localStorage中。它与当前时间t进行比较，以防止在10秒内刷新页面。假设解析不超过10秒，我设法停止页面刷新循环。下面是它对访问者的工作原理:

对于页面的访问者，x != t为真，因此addQuery(window.location)将生成页面的当前页面硬刷新，因为查询字符串被添加到当前页面的重复加载中。

当前页面硬刷新将在10秒内完成，这足以在任何服务器上加载任何html文档，因此下一次x != t将为false。在这种情况下，addQuery仅用于为资源硬刷新的href和src添加查询字符串。

它不做无限循环，因为描述了if语句。 refresh()函数可以通过按钮或其他有条件的方式调用，而不是页面加载

为了更具体地说明函数的功能;你可以随意更改名字。示例:hardRefresh, forcedRefresh, maxRefresh, refreshshall, hardLoad，…

小开

这是一个2022年的更新，有2个方法，考虑到SPA的url中有#:

方法1:

正如在其他答案中提到的，一种解决方案是将一个随机参数放入查询字符串。在javascript中，它可以这样实现:

function urlWithRndQueryParam(url, paramName) {
const ulrArr = url.split('#');
const urlQry = ulrArr[0].split('?');
const usp = new URLSearchParams(urlQry[1] || '');
usp.set(paramName || '_z', `${Date.now()}`);
urlQry[1] = usp.toString();
ulrArr[0] = urlQry.join('?');
return ulrArr.join('#');
}


function handleHardReload(url) {
window.location.href = urlWithRndQueryParam(url);
// This is to ensure reload with url's having '#'
window.location.reload();
}


handleHardReload(window.location.href);

坏的部分是，它改变了当前的url，有时，在干净的url，它可能看起来有点难看的用户。

方法2:

根据https://splunktool.com/force-a-reload-of-page-in-chrome-using-javascript-no-cache的想法，这个过程可以是先获取没有缓存的url，然后重新加载页面:

async function handleHardReload(url) {
await fetch(url, {
headers: {
Pragma: 'no-cache',
Expires: '-1',
'Cache-Control': 'no-cache',
},
});
window.location.href = url;
// This is to ensure reload with url's having '#'
window.location.reload();
}


handleHardReload(window.location.href);

甚至可以结合方法1，但我认为与头应该足够:

async function handleHardReload(url) {
const newUrl = urlWithRndQueryParam(url);
await fetch(newUrl, {
headers: {
Pragma: 'no-cache',
Expires: '-1',
'Cache-Control': 'no-cache',
},
});
window.location.href = url;
// This is to ensure reload with url's having '#'
window.location.reload();
}


handleHardReload(window.location.href);
小开

我发现的最可靠的方法是通过向查询字符串添加值来使用chache buster。

下面是我常用的一个常规程序:

    function reloadUrl() {


// cache busting: Reliable but modifies URL
var queryParams = new URLSearchParams(window.location.search);
queryParams.set("lr", new Date().getTime());
var query = queryParams.toString();
window.location.search = query;  // navigates
}

调用这个函数会产生如下结果:

https://somesite.com/page?lr=1665958485293

重载后。

这可以强制每次重新加载，但需要注意的是URL会更改。在大多数应用程序中，这并不重要，但如果服务器依赖于特定的参数，这可能会导致潜在的副作用。


提交答案