单击时刷新页面的按钮答案

【问题标题】：Button that refreshes the page on click单击时刷新页面的按钮
【发布时间】：2015-07-05 06:02:23
【问题描述】：

我需要一个在用户点击时刷新页面的按钮。我试过这个：

<input type="button" value="Reload Page" onClick="reload">

或

<input type="button" value="Refresh Page" onClick="refresh">

但都没有奏效。

【问题讨论】：

标签： javascript button refresh reload

【解决方案1】：

将onClick 与window.location.reload() 一起使用，即：

<button onClick="window.location.reload();">Refresh Page</button>

或history.go(0)，即：

<button onClick="history.go(0);">Refresh Page</button>

或window.location.href=window.location.href 'full' 重新加载，即：

<button onClick="window.location.href=window.location.href">Refresh Page</button>

The Button element - developer.mozilla.org

【讨论】：

这三个选项有什么区别？在某些情况下，一种比另一种更好吗？
第一种和第二种是重新加载页面的不同方式，但第三种是“full”重新加载，这意味着如果输入表单上有任何文本。他们会清空的。

【解决方案2】：

只需在链接上创建空引用，例如以下

 <a href="" onclick="dummy(0);return false;" >

【讨论】：

【解决方案3】：

<button onclick=location=URL>Refresh</button>

这可能看起来很有趣，但确实可以解决问题。

【讨论】：

【解决方案4】：

<a onClick="window.location.reload()">Refresh</a>

这对我来说真的很完美。

【讨论】：

【解决方案5】：

只有这个才真正重新加载页面（今天）

<input type="button" value="Refresh Page" onClick="location.href=location.href">

其他的不完全重新加载。它们将值保存在文本框中。

【讨论】：

你能解释一下你的意思是什么：“只有这个真正重新加载页面（今天）”？
“今天”是指我写它的那一天（因为每天都有一些变化）。 “只有这个”与 Pedro Lobito 上面给出的答案相关。
所有关于 SO 的回答都是“截至今天”，如果有任何变化，可能会更新，这几乎是生活中任何事情的本质，不仅仅是答案。
今天仍然是个好建议:) 有一个没有使用其他页面刷新方法更新的表单，这个解决了我的问题！谢谢你，把我的头发拉出来了……

【解决方案6】：

这对我有用：

function refreshPage(){
    window.location.reload();
}

<button type="submit" onClick="refreshPage()">Refresh Button</button>

【讨论】：

【解决方案7】：

使用它对我来说重新加载同一页面效果很好：

<button onClick="window.location.reload();">

【讨论】：

【解决方案8】：

如果您正在寻找表单重置：

<input type="reset" value="Reset Form Values"/>

或重置浏览器未处理的表单的其他方面

<input type="reset" onclick="doFormReset();" value="Reset Form Values"/>

使用 jQuery

function doFormReset(){
    $(".invalid").removeClass("invalid");
}

【讨论】：

【解决方案9】：

点击后刷新页面的按钮

将 onClick 按钮与 window.location.reload() 一起使用：

<button onClick="window.location.reload();">

【讨论】：

【解决方案10】：

我注意到这里的所有答案都使用内联 onClick 处理程序。通常建议将 HTML 和 Javascript 分开。

这是一个直接向按钮添加点击event listener 的答案。当它被点击时，它会调用location.reload，这会导致页面使用当前 URL 重新加载。

const refreshButton = document.querySelector('.refresh-button');

const refreshPage = () => {
  location.reload();
}

refreshButton.addEventListener('click', refreshPage)

.demo-image {
  display: block;
}

<button class="refresh-button">Refresh!</button>
<img class="demo-image" src="https://picsum.photos/200/300">

【讨论】：

【解决方案11】：

虽然问题是针对button，但如果有人想使用<a>刷新页面，你可以这样做

<a href="./">Reload</a>

【讨论】：

【解决方案12】：

<button onClick="window.location.reload();">Reload</button>

或者你也可以使用

<form action="<same page url>" method="GET">
<button>Reload</button>
</form>

注意：将"<same page link>" 更改为您要重新加载的同一页面的网址。例如： <form action="home.html> method="GET">

【讨论】：

【解决方案13】：

我不想使用 JavaScript，所以我想出了一种使用“隐藏表单”的方法。这是一个例子：

<form method="get" accept-charset="utf-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <input type="submit" value="Read">
  <input type="submit" value="Reload" form="hidden_form">
</form>

<form id="hidden_form" method="get"></form>

【讨论】：

【解决方案14】：

不需要js，可以把button标签放在form标签里：

<form>  
  <button class="restart-btn">Restart</button>
</form>

测试一下，给我你的意见！

【讨论】：

【解决方案15】：

<button type="submit" onclick="refresh">refresh</button>

这对我有用！

【讨论】：

【解决方案16】：

这个例子是为那些使用 ReactJs 的人准备的，如果你的 reactjs 应用上有路由，只需使用下面的函数：

import React from "react";
import PropTypes from "prop-types";
import { useHistory } from "react-router-dom";

const Home = () => {
const directToProfile = () => {
    let route = `Profile`;
    history.push(route);
    window.location.reload()
  };
    return (
        <div>
            <li className="sidebar-item">
                {" "}
                <a
                  className="sidebar-link sidebar-link"
                  href="javascript:void(0);"
                  aria-expanded="false"
                >
                  <i data-feather="home" className="feather-icon" />
                  <span className="hide-menu" onClick={directToProfile}>
                    Home
                  </span>
                </a>
              </li>
        </div>
    )
}

export default Home

【讨论】：

OP 从未说过他/她使用 reactjs！