如何使用jQuery刷新页面？

时间：2011-03-23 11:55:32

标签： javascript jquery refresh reload

如何使用jQuery刷新页面？

30 个答案:

答案 0 :(得分：3599)

使用location.reload()：

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

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

答案 1 :(得分：433)

即使没有jQuery，这应该适用于所有浏览器：

location.reload();

答案 2 :(得分：410)

使用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。

    7. 您可以继续创作列表：

    • window.location = window.location
    • window.self.window.self.window.window.location = window.location
    • ...and other 534 ways 

    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>

答案 3 :(得分：189)

我想有很多方法可行：

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

答案 4 :(得分：117)

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

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

我使用的方法是Ajax jQuery。我在Chrome上测试了它。然后我将代码放在将触发重新加载的处理程序中。 URL为""，表示 此页 。

答案 5 :(得分：101)

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

window.location = window.location.pathname;

而不是

window.location.reload();

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

答案 6 :(得分：60)

问题应该是，

如何使用 JavaScript

刷新页面 
window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

你被宠坏了选择。

答案 7 :(得分：51)

您可能想要使用

location.reload(forceGet)

forceGet是一个布尔值和可选项。

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

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

或者只是

location.reload()

如果您希望快速轻松地进行缓存。

答案 8 :(得分：33)

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

  • <强> location.reload(true)

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

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

    请注意，Firefox（请参阅MDN）和Internet Explorer（请参阅MSDN）支持将true传递给location.reload()，但不受普遍支持且不属于the W3 HTML 5 spec，the W3 draft HTML 5.1 spec，the WHATWG HTML Living Standard。

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

  • location.reload() 或 location.reload(false)

    重新加载页面，获取页面HTML本身的新的非缓存副本，并对浏览器缓存的任何资源（如脚本）执行RFC 7234重新验证请求，即使它们是 fresh 是RFC 7234允许浏览器在不重新验证的情况下为它们提供服务。

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

    这相当于用户只需在浏览器中按“刷新”按钮即可。

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

    仅在页面的URL不包含fragid / hashbang时才有效！

    重新加载页面，而无需从缓存中重新获取或重新验证任何 fresh资源。如果页面的HTML本身是新鲜的，这将重新加载页面而不执行任何HTTP请求。

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

    但是，如果页面的URL包含哈希值，则无效。

    同样，据我所知，此处的缓存行为未指定;我通过测试确定了它。

因此，总而言之，您想要使用：

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

答案 9 :(得分：23)

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

因此，如果您只是想刷新HTML，window.location = document.URL将更快地返回并且流量更少。但如果URL中有哈希（＃），它将不会重新加载页面。

答案 10 :(得分：15)

jQuery Load函数也可以执行页面刷新：

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

答案 11 :(得分：13)

这是一个使用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>

注意：

  • 直接使用$.ajax，例如$.get('',function(data){$(document.body).html(data)}) causes css/js files to get cache-busted，即使您使用cache: true，这也是我们使用parseHTML
    • 的原因
  • parseHTML will NOT find a body tag所以你的整个身体都需要加入一个额外的div，我希望这一天的知识可以帮助你，你可以猜到我们如何为div
    • 选择id
  • 使用http-equiv="refresh"以防万一javascript / server hiccup出现问题，然后在没有接到电话的情况下页面仍会重新加载
  • 这种方法可能会以某种方式泄漏内存，http-equiv刷新修复

答案 12 :(得分：12)

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

简单的JavaScript解决方案：

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

location.reload();

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

  

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

这意味着有两种方式：

Solution1：强制从服务器重新加载当前页面 

location.reload(true);

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

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

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

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

答案 13 :(得分：11)

我找到了

window.location.href = "";

或

window.location.href = null;

也会刷新页面。

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

答案 14 :(得分：5)

您可以使用 JavaScript location.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>

答案 15 :(得分：5)

您不需要来自jQuery的任何内容，使用纯JavaScript 重新加载页面，只需在位置属性上使用重新加载功能，如下所示：

window.location.reload();

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

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

window.location.reload(true);

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

location.reload();

答案 16 :(得分：2)

有很多方法可以重新加载当前页面，但是以某种方式使用这些方法，您可以看到页面已更新，但缓存值很少，因此，请解决该问题，或者如果您希望进行艰难的请求，请使用以下代码

    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

答案 17 :(得分：2)

如果您使用的是jQuery并希望刷新，请尝试在javascript函数中添加jQuery：

我想在单击h3时在页面上隐藏iframe，对我来说这是可行的，但是我无法单击允许我查看iframe的项目除非我手动刷新浏览器...否则不理想。

我尝试了以下操作：

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

将普通Jane javascript与jQuery混合即可。

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        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);

答案 18 :(得分：2)

使用

location.reload();

或

window.location.reload();

答案 19 :(得分：2)

这里的所有答案都很好。由于问题是关于如何使用 重新加载页面，所以我只是想为将来的读者添加更多内容。

  

jQuery 是跨平台的 JavaScript库，旨在简化HTML的客户端脚本。

     

〜Wikipedia〜

因此，您将了解或的基础是基于的。因此，对于简单的事情，使用纯会更好。

但是，如果您需要一个解决方案，那就是一个。

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

答案 20 :(得分：1)

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

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

答案 21 :(得分：1)

简单的Javascript解决方案： 

 location = location; 


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

答案 22 :(得分：0)

以下几行代码可用于使用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>

答案 23 :(得分：0)

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

history.go()

答案 24 :(得分：0)

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

location.reload(); //simple refresh

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

location.reload(true);//hard refresh

答案 25 :(得分：0)

<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

答案 26 :(得分：0)

$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

答案 27 :(得分：0)

你们可能需要使用

    location.reload(forceGet)

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

默认为false，即重新加载缓存的页面。

答案 28 :(得分：0)

您可能需要使用

 location.reload()

或者也可能需要使用

location.reload(forceGet)

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

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

答案 29 :(得分：-1)

它在JavaScript中最短。

location = '';
相关问题
最新问题