如何使用jQuery刷新页面?

luca 2361 javascript jquery refresh reload

如何使用jQuery刷新页面?

Roy.. 3722

用途location.reload():

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

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

  • 这不适合我.这工作有效:window.location.href = window.location.href; (28认同)
  • `window.location.reload(true);`将硬刷新,否则默认为false (19认同)
  • 这不适合我.`window.location.href = window.location.href;`和`location.href = location.href;`工作. (4认同)

Thorben.. 447

即使没有jQuery,这应该适用于所有浏览器:

location.reload();


Ionică Bizău.. 435

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

您可以继续创作列表:

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>

  • +1列表和jsfiddle.我有一个问题,在jsfiddle 1和6中使生成的页面在重新加载时消失片刻,并且2-5使页面重新加载"不明显".在Chrome中的开发工具中,我可以看到正在重新生成的页面,但是你能解释重绘过程是不同的吗?请.先感谢您. (10认同)
  • 1和6`(reload()/(false))`较慢。嗯。有趣。:)以及1和6与`reload()`相同,其默认参数为`false`。 (2认同)

David.. 197

我想有很多方法可行:

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

  • 这个`window.location.href = window.location.href;`如果你的URL在末尾`example.com/something #blah`上有#/ hashbang,那就什么都不会** (39认同)
  • 如果有人想知道`location.reload()`和`history.go(0)`之间的区别是:没有.http://www.w3.org/TR/html5/browsers.html#dom-history-go中HTML 5规范的相关部分明确规定它们是等价的:*"当`go(delta)`方法时被调用,如果方法的参数被省略或者值为零,则用户代理必须像调用`location.reload()`方法一样."* (17认同)

Peter.. 122

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

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

我使用的方法是Ajax jQuery.我在Chrome 13 上测试了它.然后我将代码放在将触发重新加载的处理程序中.该URL"",这意味着这个页面.

  • Downvoting.这并没有真正回答这个问题,而是展示了如何用Ajax响应替换页面的HTML.这与重新加载页面有所不同:例如,我现在处理的情况是,这不能解决原始问题. (67认同)
  • 像这样重新加载整个HTML的一个问题是必须手动调用onload/ready事件并减轻先前声明的变量的覆盖,这些变量在刷新后可能希望保留其状态. (5认同)
  • 除非你对你的代码非常小心,否则这个_will_会导致内存泄漏,你已经附加了事件处理程序,并且在替换它们附加的代码之前没有分离它们. (3认同)
  • 一些人评论说这种方法对刷新页面的一部分很有用.事实并非如此.我认为那些人误解了[`$ .ajax`](http://api.jquery.com/jquery.ajax/)的`context`参数,并期望它以某种方式表现出某种魔力.它所做的就是[设置回调函数的'this`值](http://stackoverflow.com/a/5097214/1709587).Ajax到``"`的URL会命中你当前的URL,从而通常加载完整的HTML(包括`<html>`和`<head>`和`<body>`),这里没有任何内容回答过滤掉你不想要的东西. (3认同)

小智.. 106

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

window.location = window.location.pathname;

代替

window.location.reload();

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

  • 但是这会丢失查询字符串,而window.location = window.location则不会 (12认同)

JohnP.. 64

问题应该是,

如何使用JavaScript刷新页面

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

你被宠坏了选择.


Pinch.. 55

你可能想用

location.reload(forceGet)

forceGet 是一个布尔值和可选的.

默认值为false,从缓存重新加载页面.

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

要不就

location.reload()

如果你想快速轻松地进行缓存.


Mark Amery.. 39

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

  • location.reload(true)

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

    相当于用户在可能的浏览器中进行"硬重载".

    请注意,Firefox(请参阅MDN)和Internet Explorer(请参阅MSDN)支持传递true,但不是普遍支持,不是W3 HTML 5规范的一部分,也不是W3草案HTML 5.1规范,也不是WHATWG HTML Living Standard.location.reload()

    在Google Chrome浏览器等不受支持的浏览器中,location.reload(true)其行为与location.reload().

  • location.reload() 要么 location.reload(false)

    重新加载页面,获取页面HTML本身的新的非缓存副本,并对浏览器缓存的任何资源(如脚本)执行RFC 7234重新验证请求,即使它们是新的,RFC 7234允许浏览器提供服务他们没有重新验证.

    location.reload()据我所知,在执行调用时,浏览器应该如何利用其缓存?我通过实验确定了上述行为.

    这相当于用户只需按下浏览器中的"刷新"按钮即可.

  • location = location(或无限多种其他可能涉及分配location或属于其属性的技术)

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

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

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

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

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

总而言之,您想要使用:

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


小智.. 26

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

因此,如果您只想刷新HTML,那么window.location = document.URL返回的速度会更快,流量也会减少.但如果URL中存在哈希(#),则不会重新加载页面.


Suleman Mirz.. 17

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

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

  • 不,这不是页面刷新. (3认同)

Fer To.. 16

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

简单的JavaScript解决方案:

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

location.reload();

这里有很多人失踪,因为他们希望得到一些"点"是reload()函数本身提供了一个布尔作为参数(详情:https://developer.mozilla.org/en-US/docs/Web/API/Location/reload).

Location.reload()方法从当前URL重新加载资源.它的可选唯一参数是一个布尔值,当它为真时,会导致页面始终从服务器重新加载.如果为false或未指定,则浏览器可以从其缓存重新加载页面.

这意味着有两种方式:

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

location.reload(true);

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

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

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

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


William Entr.. 15

这是一个使用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)}) 会导致css/js文件被缓存破坏,即使你使用cache: true,这就是我们使用的原因parseHTML
  • parseHTML不会找到一个body标签,所以你的整个身体需要额外的div,我希望这一天的知识有助于你,你可以猜到我们如何选择id为div
  • 使用http-equiv="refresh"以防万一javascript/server hiccup出现问题,那么页面仍会重新加载,而不会接到电话
  • 这种方法可能以某种方式泄漏内存,http-equiv刷新修复了这一点


Mujah Maskey.. 13

我发现

window.location.href = "";

要么

window.location.href = null;

也刷页面.

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


Poorna Senan.. 9

您可以使用 JavaScript location.reload() 方法.此方法接受布尔参数.truefalse.如果参数是 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>


Alireza.. 8

不需要 jQuery中的任何东西,使用纯JavaScript重新加载页面,只需在location属性上使用reload函数,如下所示:

window.location.reload();

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

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

window.location.reload(true);

此外,如果您已经在窗口范围内,您可以摆脱窗口并执行:

location.reload();


H.Ostwal.. 7

使用

location.reload();

要么

window.location.reload();


归档时间:

查看次数:

2392825 次

最近记录:

11 月 前