location.reload(true) 已弃用答案

【问题标题】：location.reload(true) is deprecatedlocation.reload(true) 已弃用
【发布时间】：2019-08-03 06:57:03
【问题描述】：

我知道重新加载 Angular 单页应用程序并不理想。但是有一个地方我需要重新加载完整的应用程序。

TSLint 表示不推荐使用重新加载。

有没有其他选择？

【问题讨论】：

只有 forceReload 标志被弃用了。
这能回答你的问题吗？ How to reload a page using JavaScript
它在某些浏览器（如 Firefox）中非常有用，但如果你删除它，你将不得不想出一种方法来强制重新加载它。

【解决方案1】：

您可以在没有 forceReload 标志的情况下使用 location.reload()。这只是被弃用，因为它不在规范中：https://www.w3.org/TR/html50/browsers.html#dom-location-reload

【讨论】：

那么，就我而言，为什么 TSLint 会警告我？：window.location.reload.bind(window.location)
如果我想强制重新加载该怎么办？
现在如何强制完全重新加载？
location.reload() 不适用于生产环境中的 Edge

【解决方案2】：

如果您查看 Location 的接口定义，您将看到以下内容：

/**
  * Reloads the current page.
  */
reload(): void;
/** @deprecated */
reload(forcedReload: boolean): void;

使用location.reload() 是有效的语法。只有强制重新加载的重新加载已被弃用。

在您的情况下，将 location.reload(true) 更改为 location.reload() 以解决您的问题。

【讨论】：

【解决方案3】：

由于forceReload参数已被弃用，正如3人已经提到的，它也被一些浏览器忽略了。

如果您想执行强制重新加载（例如使用 Ctrl + F5 完成）以重新加载所有资源，则仅使用 location.reload(); 不是解决方案来自服务器而不是浏览器缓存。

解决此问题的方法是，对当前位置执行POST 请求，因为这总是会使浏览器重新加载所有内容。

location.reload() 只执行GET 请求。

所以我想出了一个解决方法，在 Angular 应用程序上放置一个带有 method="POST" 和 action="https://example.org/" 的空表单，然后在需要时从代码隐藏提交该表单。

模板：

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

代码隐藏/组件：

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

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

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

我想这也可以用一种更简单的方式来完成。我正在调查...（可能是 HttpClient？）

【讨论】：

我收到Cannot POST /
我认为这是最好的主意！！
我也收到无法 POST /
@NemanjaAndric 我该如何解决这个问题？你得到答案了吗？
还得到：POST localhost:3000/login 404（未找到）

【解决方案4】：

将 location.reload(true) 更改为 location.reload() 有效。强制重载是不推荐使用的。

【讨论】：

【解决方案5】：

由于window.location.reload(true) 已被弃用。您可以使用：

window.location.href = window.location.href,

强制重新加载并清除缓存。

【讨论】：

甚至比这更好，使用 window.location.replace(window.location.href) - 这不会像简单的分配那样在浏览器历史记录中添加条目。
这不会触发重新加载（至少在 MacOS 上测试过 FF），直到我通过附加时间戳或其他方式更改 URL。

【解决方案6】：

根据 Martin Schneider 的回答，您可以创建一个函数，然后调用它

forceReload() {
    if(environment.production) {
        const form = document.createElement('form');
        form.method = "POST";
        form.action = location.href;
        document.body.appendChild(form);
        form.submit();
    } else {
        window.location.reload();
    }
}

祝你好运！ ?

【讨论】：

【解决方案7】：

我创建了一个小包，以便有一个解决方案来清理缓存并在必要时重新加载页面：https://www.npmjs.com/package/clear-cache

clearCache() 或 clearCache(false) 当您只想清除缓存但不想重新加载页面时。

【讨论】：

【解决方案8】：

我认为刷新（不仅仅是重新加载）页面的最佳和最有效的方法是使用带有 method="post" 的表单、一个空操作和一个提交按钮，因为“发布”请求永远不会被缓存。简单而有效，甚至完全不需要 JavaScript！

<form action="" method="post">
    <button type="Submit">Refresh</button>
</form>

如果您需要以编程方式执行此操作，您可以使用 CSS 隐藏按钮并使用 JavaScript 触发按钮中的点击操作。

感谢@Martin Schneider 的想法。

【讨论】：