如何创建在单击时刷新页面的按钮？

我需要一个按钮，将刷新用户的点击页面。 我试过了:

或者

但都没用。

652017 次浏览
小开

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

<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代表「 满了」重载，即:

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

按钮元素- developer.mozilla.org

小开

只需在链接上创建空引用即可，如下所示

 <a href="" onclick="dummy(0);return false;" >
小开 
<button onclick=location=URL>Refresh</button>

这可能看起来很有趣，但它确实起作用了。

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

这对我来说真是太好了。

小开

只有这个真正重载页面(今天)

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

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

小开

这对我有用:

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

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

使用它的工作罚款为我重新加载相同的网页:

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

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

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

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

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

使用 jQuery

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

点击刷新页面的按钮

使用带有 window.location.reload ()的 onClick 按钮:

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

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

这里有一个答案，添加一个单击 事件监听器直接到按钮。当单击时，它调用 位置，重新装弹，这会导致页面用当前 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">

小开

虽然这个问题是针对 button的，但是如果有人想要使用 <a>刷新页面，您可以简单地这样做

<a href="./">Reload</a>
小开 
<button onClick="window.location.reload();">Reload</button>

或者你也可以用

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

注意: 使用要重新加载的同一页面的 URL 更改 "<same page link>"。 例如: <form action="home.html> method="GET">

小开

我不想使用 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>
小开

不需要 Js，你可以把按钮标签放在表单标签中:

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

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

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

这招对我管用！

小开

“ reload”和“ refresh”不是 JavaScript 函数。 尝试使用以下代码:

function reload() {
window.location.refresh();
}
<button onClick="reload()"></button>

小开

在设计网站时，考虑内容安全策略和禁用 JavaScript 用户的最佳实践总是很重要的。

像 onClick这样的内联脚本是一个漏洞。

- 忽略 <noscript>标记并设置隐藏的元素的样式，然后使用 JS 将 display:修改回其各自的样式，从而迫使用户启用 JS。

这是所有情况下最简单的解决方案。

<a href="/">Reload Page</a>
小开 
   <script>
function locationreload() {
location.reload();
          

}
</script>


<button type="submit" onclick="return confirm('Do you really want to refresh your page?') , locationreload();" class="btn btn-success">Refresh</button>

提交答案