点击刷新页面的按钮

Question

我需要一个按钮，可以在用户单击时刷新页面。 我试过这个：

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

或

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

但两者都不起作用。

Answer 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

表示“完全”重新加载，例如：

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

---

按钮元素-developer.mozilla.org

Answer 2

这对我有用：

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

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

Answer 3

我注意到这里的所有答案都使用内联

onClick

处理程序。通常建议将 HTML 和 Javascript 分开。

这是一个直接向按钮添加单击事件监听器的答案。单击时，它会调用 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">

Answer 4

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

这对我来说真的很完美。

Answer 5

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

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

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

Answer 6

虽然问题是针对

button

，但如果有人想使用

<a>

刷新页面，你可以简单地这样做

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

Answer 7

点击刷新页面的按钮

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

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

Answer 8

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

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

Answer 9

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

这可能看起来很有趣，但确实有效。

Answer 10

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

或者你也可以使用

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

注意：将

"<same page link>"

更改为您要重新加载的同一页面的 url。 例如：

<form action="home.html> method="GET">

Answer 11

使用它对我来说可以很好地重新加载同一页面：

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

Answer 12

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

-像

onClick

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

- 忽略

<noscript>

标签并隐藏元素的样式，然后使用 JS 将

display:

更改回其各自的样式，强制用户启用 JS。

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

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

Answer 13

   <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>

Answer 14

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

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

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

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

使用 jQuery

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

Answer 15

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

这对我有用！

Answer 16

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

Answer 17

不需要Js，可以将button标签放在form标签中：

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

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

Answer 18

“重新加载”和“刷新”不是 JavaScript 函数。 尝试使用以下代码：

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

<button onClick="reload()"></button>