如何使用JavaScript刷新页面？

如何使用JavaScript刷新页面？

2985490 次浏览
小开

这适用于所有浏览器：

location.reload();
小开
最佳答案

使用#0。

例如，要在单击id="something"的元素时重新加载：

$('#something').click(function() {location.reload();});

reload()函数接受一个可选参数，可以设置为true以强制从服务器而不是缓存重新加载。参数默认为false，因此默认情况下页面可以从浏览器的缓存重新加载。

小开

有很多方法可以工作，我想：

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
小开

问题应该是，

如何使用JavaScript刷新页面

window.location.href = window.location.href; //This is a possibilitywindow.location.reload(); //Another possiblityhistory.go(0); //And another

你被宠坏了选择。

小开

要使用jQuery重新加载页面，请执行以下操作：

$.ajax({url: "",context: document.body,success: function(s,x){$(this).html(s);}});

我在这里使用的方法是Ajax jQuery。我在Chrome 13上测试了它。然后我将代码放入将触发重新加载的处理程序中。url是""，这意味着本页。

Edit：不幸的是，我很快就不得不删除这个答案，因为问题已经改变了，用户似乎不太清楚他们在问什么。一些用户评论说刷新与重新加载页面不同；请参阅此问题的修订https://stackoverflow.com/posts/5404839/revisions]据我所知，从最初的问题中，即使用异步的AJAX刷新页面…，刷新页面应该意味着向页面获取新的和更新的内容。无论如何，这个答案很快就会消失。/

小开

如果当前页面是由POST请求加载的，您可能希望使用

window.location = window.location.pathname;

而不是

window.location.reload();

因为如果在POST请求加载的页面上调用，window.location.reload()将提示确认。

小开

有多个种无限的方法可以使用JavaScript刷新页面：

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)

  6. location.reload(false)

    如果我们需要将文档从再次访问Web服务器（例如文档内容的位置动态更改）我们将参数作为true传递。

您可以继续创建列表：

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • …和其他534种方式

var methods = ["location.reload()","history.go(0)","location.href = location.href","location.href = location.pathname","location.replace(location.pathname)","location.reload(false)"];
var $body = $("body");for (var i = 0; i < methods.length; ++i) {(function(cMethod) {$body.append($("<button>", {text: cMethod}).on("click", function() {eval(cMethod); // don't blame me for using eval}));})(methods[i]);}
button {background: #2ecc71;border: 0;color: white;font-weight: bold;font-family: "Monaco", monospace;padding: 10px;border-radius: 4px;cursor: pointer;transition: background-color 0.5s ease;margin: 2px;}button:hover {background: #27ae60;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

小开

jQueryLoad函数还可以执行页面刷新：

$('body').load('views/file.html', function () {$(this).fadeIn(5000);});
小开

您可能想要使用

location.reload(forceGet)

forceGet是一个布尔值并且是可选的。

默认值为false，从缓存中重新加载页面。

如果您想强制浏览器从服务器获取页面以摆脱缓存，请将此参数设置为true。

或者只是

location.reload()

如果你想快速和容易的缓存。

小开

window.location.reload()将从服务器重新加载，并再次加载所有数据、脚本、图像等。

因此，如果您只想刷新超文本标记语言，window.location = document.URL将更快地返回并且流量更少。但如果URL中有哈希（#），它不会重新加载页面。

小开

由于问题是通用的，让我们尝试总结答案的可能解决方案：

简单的JavaScript解决方案：

最简单的方法是以适当的方式放置一行解决方案：

location.reload();

许多人在这里缺少的，因为他们希望得到一些“点”是重新加载（）函数本身提供了一个布尔值作为参数（详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Location/reload）。

Location.reload（）方法从当前资源中重新加载资源URL。它的可选唯一参数是一个布尔值，当它是true，导致页面始终从服务器重新加载。如果是如果错误或未指定，浏览器可能会重新加载页面缓存。

这意味着有两种方法：

解决方案1：强制从服务器重新加载当前页面

location.reload(true);

解决方案2：从缓存或服务器重新加载（基于浏览器和您的配置）

location.reload(false);location.reload();

如果你想将它与jQuery结合起来监听事件，我建议使用“. on（）”方法而不是“. Click”或其他事件包装器，例如更合适的解决方案是：

$('#reloadIt').on('eventXyZ', function() {location.reload(true);});
小开

三种具有不同缓存相关行为的方法：

  • #0

    在实现location.reload()的forcedReload参数的浏览器中，通过获取页面及其所有资源（脚本、样式表、图像等）的新副本来重新加载。不会从缓存中提供任何资源-从服务器获取新副本，而不会在请求中发送任何if-modified-since或if-none-match标头。

    相当于用户在可能的情况下在浏览器中进行“硬重新加载”。

    请注意，Firefox（请参阅MDN）和Internet Explorer（请参阅MSDN）支持将true传递给location.reload()，但并非普遍支持，也不是W3超文本标记语言5规范、W3草案超文本标记语言5.1规范和WHATWG超文本标记语言Living Standard的一部分。

    在不支持的浏览器中，如GoogleChrome，location.reload(true)的行为与location.reload()相同。

  • #0或#1

    重新加载页面，获取页面超文本标记语言本身的新鲜非缓存副本，并对浏览器缓存的任何资源（如脚本）执行rfc7234重新验证请求，即使它们是新鲜的是RFC 7234允许浏览器提供它们而无需重新验证。

    据我所知，浏览器在执行location.reload()调用时应该如何利用其缓存并未指定或记录；我通过实验确定了上述行为。

    这相当于用户只需按下浏览器中的“刷新”按钮。

  • #0（或无限多其他可能的技术，涉及分配给location或其属性）

    仅当页面的URL不包含fragid/hashang时才有效！

    重新加载页面，而不从缓存中重新读取或重新验证任何新鲜资源。如果页面的超文本标记语言本身是新的，这将重新加载页面，而根本不执行任何HTTP请求。

    这相当于（从缓存的角度来看）用户在新选项卡中打开页面。

    但是，如果页面的URL包含哈希，则不会产生任何影响。

    同样，据我所知，这里的缓存行为是未指定的；我通过测试确定了它。

简而言之，您需要使用：

  • location = location用于最大限度地使用缓存，只要页面在其URL中没有哈希，在这种情况下这将不起作用
  • location.reload(true)无需重新验证即可获取所有资源的新副本（尽管它不是普遍支持的，并且在某些浏览器中的行为与location.reload()没有什么不同，例如Chrome）
  • location.reload()忠实地再现用户点击“刷新”按钮的效果。
小开

这是一个使用jQuery异步重新加载页面的解决方案。它避免了window.location = window.location引起的闪烁。此示例显示了一个持续重新加载的页面，就像在仪表板中一样。它经过了实战测试，并在时代广场的信息显示电视上运行。

<!DOCTYPE html><html lang="en"><head>...<meta http-equiv="refresh" content="300"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script><script>function refresh() {$.ajax({url: "",dataType: "text",success: function(html) {$('#fu').replaceWith($.parseHTML(html));setTimeout(refresh,2000);}});}refresh();</script></head><body><div id="fu">...</div></body></html>

备注：

  • 像$.get('',function(data){$(document.body).html(data)})导致css/js文件被缓存破坏一样直接使用$.ajax，即使你使用cache: true，这就是为什么我们使用parseHTML
  • #0找不到#1标签所以你的整个身体需要一个额外的div，我希望这个知识有一天能帮助你，你可以猜到我们是如何选择id的div
  • 使用http-equiv="refresh"只是在javascript/服务器打嗝出错的情况下，然后页面仍然会重新加载而不会接到电话
  • 这种方法可能会以某种方式泄漏内存，http-equiv刷新修复了这个问题
小开

我发现

window.location.href = "";

或

window.location.href = null;

也使页面刷新。

这使得重新加载页面更容易删除任何哈希。当我在iOS模拟器中使用AngularJS时，这非常好，这样我就不必重新运行应用程序了。

小开

您可以使用javascriptlocation.reload()方法。此方法接受布尔参数。true或false。如果参数是true；页面总是从服务器重新加载。如果是false；这是默认的或带有空参数的浏览器从其缓存中重新加载页面。

true参数

<button type="button" onclick="location.reload(true);">Reload page</button>

default/false参数

 <button type="button" onclick="location.reload();">Reload page</button>

使用jQuery

<button id="Reloadpage">Reload page</button><script type="text/javascript">$('#Reloadpage').click(function() {location.reload();});</script>
小开

在按钮标签中使用onclick="return location.reload();"。

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
小开

你从jQuery不需要任何东西，使用纯JavaScript重新加载页面，只需在位置属性上使用重新加载函数，如下所示：

window.location.reload();

默认情况下，这将使用浏览器缓存（如果存在）重新加载页面。

如果您想强制重新加载页面，只需将真正值传递给重新加载方法，如下所示…

window.location.reload(true);

此外，如果您已经在窗口范围中，您可以摆脱窗口并执行以下操作：

location.reload();
小开

简单的JavaScript解决方案：

 location = location;

<button onClick="location = location;">Reload</button>

小开

如果您正在使用jQuery并且想要刷新，请尝试在javascript函数中添加您的jQuery：

我想在点击oh anh3时从页面中隐藏一个ifram，对我来说，它起作用了，但我无法点击允许我查看iframe的项目，除非我手动刷新浏览器……不理想。

我尝试了以下方法：

var hide = () => {$("#frame").hide();//jQuerylocation.reload(true);//javascript};

将普通Jane javascript与您的jQuery混合应该可以工作。

// code where hide (where location.reload was used)function was integrated, belowiFrameInsert = () => {var file = `Fe1FVoW0Nt4`;$("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);$("h3").enter code hereclick(hide);}
// View Player$("#id-to-be-clicked").click(iFrameInsert);
小开

以下是一些代码行，可用于重新加载页面使用jQuery。

它使用jQuery包装器并提取本机dom元素。

如果您只想在代码上使用jQuery感觉并且不关心代码的速度/性能，请使用此选项。

只需从1到10中选择适合您需求的，或者根据之前的模式和答案添加更多。

<script>$(location)[0].reload(); //1$(location).get(0).reload(); //2$(window)[0].location.reload(); //3$(window).get(0).location.reload(); //4$(window)[0].$(location)[0].reload(); //5$(window).get(0).$(location)[0].reload(); //6$(window)[0].$(location).get(0).reload(); //7$(window).get(0).$(location).get(0).reload(); //8$(location)[0].href = ''; //9$(location).get(0).href = ''; //10//... and many other more just follow the pattern.</script>
小开

这里的所有答案都很好。由于问题指定了使用jQuery重新加载页面，我只是想为未来的读者添加更多内容。

jQuery是一个跨平台javascript库，旨在简化超文本标记语言的客户端脚本。

~维基百科

所以你会明白9;jQuery&9;" rel="tag">jQuery或9;jQuery&9;" rel="tag">jQuery的基础是基于9;javascript&9;" rel="tag">javascript的。所以当涉及到简单的事情时，纯9;javascript&9;" rel="tag">javascript会更好。

但是如果你需要一个的解决方案，这里有一个。

$(location).attr('href', '');
小开

它是JavaScript中最短的。

window.location = '';
小开

使用 

location.reload();

或

window.location.reload();
小开

有很多方法可以重新加载当前页面，但以某种方式使用这些方法，你可以看到页面更新，但缓存值不会很少，所以克服这个问题，或者如果你想提出硬请求，那么使用下面的代码。

    location.reload(true);//Here, it will make a hard request or reload the current page and clear the cache as well.

location.reload(false); OR location.reload();//It can be reload the page with cache
小开

可能最短（12个字符）-使用历史

history.go()
小开

您可以通过两种方式编写它。第一种是重新加载页面的标准方式，也称为简单刷新 

location.reload(); //simple refresh

另一个称为硬刷新。在这里您传递布尔表达式并将其设置为true。这将重新加载页面，破坏旧的缓存并从头开始显示内容。

location.reload(true);//hard refresh
小开 
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>
<script>$(document).on('click','#refresh',function(){location.reload(true);});</script>
小开 
$(document).on("click", "#refresh_btn", function(event){window.location.replace(window.location.href);});
小开

你们可能需要用

    location.reload(forceGet)

forceGet是一个布尔值并且是可选的。

默认值为false，它会重新加载缓存的页面。

小开

您可能需要使用

 location.reload()

或可能需要使用

location.reload(forceGet)

forceGet是一个布尔值并且是可选的。

如果您想强制浏览器从服务器获取页面以接收摆脱缓存，请将此参数设置为true

小开

这对我有用。

function reload(){location.reload(true);}
小开

您应该使用以下代码

window.location.reload();

提交答案