关于javascript：如何用jquery刷新页面？


How can I refresh a page with jQuery?

如何使用jquery刷新页面？

相关讨论

使用location.reload()：

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

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

相关讨论

即使没有jquery，这也适用于所有浏览器：

1
location.reload();

使用javascript刷新页面的方法有很多种：

  • location.reload()
  • history.go(0)
  • location.href = location.href
  • location.href = location.pathname
  • location.replace(location.pathname)

  • location.reload(false)


    If we needed to pull the document from
    the web-server again (such as where the document contents
    change dynamically) we would pass the argument as true.

    • 你可以继续保持列表的创造性：

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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]);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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;
    }
    1
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    相关讨论

    我想，有很多方法可以奏效：

    • window.location.reload();
    • history.go(0);
    • window.location.href=window.location.href;
    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    $.ajax({
        url:"",
        context: document.body,
        success: function(s,x){
            $(this).html(s);
        }
    });

    这里我使用的方法是Ajax jQuery。我在铬13上测试过。然后我将代码放入将触发重新加载的处理程序中。网址是""，意思是这个页面。

    相关讨论

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

    1
    window.location = window.location.pathname;

    而不是

    1
    window.location.reload();

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

    相关讨论

    问题应该是，

    如何用javascript刷新页面

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

    你被宠坏了。

    你可能想用

    1
    location.reload(forceGet)

    forceGet是一个布尔值，可选。

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

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

    或者只是

    1
    location.reload()

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

    相关讨论

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

    • location.reload(true)

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

      相当于用户在可能的浏览器中执行"硬加载"。

      请注意，在firefox(请参阅mdn)和internet explorer(请参阅msdn)中支持将true传递给location.reload()，但并不普遍支持它，它不属于w3 html 5规范的一部分，也不属于w3 html 5.1规范草案，也不属于whatwg html生活标准。

      在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)在不重新验证的情况下获取所有资源的新副本(尽管它不受普遍支持，并且在某些浏览器(如chrome)中的行为与location.reload()没有任何不同)
    • location.reload()以忠实再现用户单击"刷新"按钮的效果。
    相关讨论

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

    因此，如果您只想刷新HTML，那么window.location = document.URL将返回得更快，而且通信量也更少。但如果URL中存在哈希()，则不会重新加载页面。

    相关讨论

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

    1
    2
    3
    $('body').load('views/file.html', function () {
        $(this).fadeIn(5000);
    });
    相关讨论

    这里有一个使用jquery异步重新加载页面的解决方案。它避免了由window.location = window.location引起的闪烁。这个例子显示了一个不断重新加载的页面，如在仪表板中。它经过了战斗测试，正在时代广场的信息显示电视上运行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!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">
       
        function refresh() {
          $.ajax({
            url:"",
            dataType:"text",
            success: function(html) {
              $('#fu').replaceWith($.parseHTML(html));
              setTimeout(refresh,2000);
            }
          });
        }
        refresh();
       
      </head>
      <body>
       
          ...
       
      </body>
    </html>

    笔记：

    • 直接使用$.ajax和$.get('',function(data){$(document.body).html(data)})一样，会导致css/js文件被缓存占用，即使使用cache: true也会导致使用parseHTML的原因。
    • parseHTML找不到body的标签，所以你的整个身体需要额外分配，我希望这一丁点的知识有一天能帮助你，你可以猜我们是如何为div选择身份证的。
    • 使用http-equiv="refresh"，以防javascript/server出现问题，那么页面仍然会重新加载，而不会接到电话。
    • 这种方法可能以某种方式泄漏内存，http-equiv刷新修复了

    由于问题是一般性的，让我们尝试为答案总结可能的解决方案：

    简单的纯JavaScript解决方案：

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

    1
    location.reload();

    许多人在这里缺少的是reload()函数本身提供了一个布尔值作为参数(详细信息：https://developer.mozilla.org/en-us/docs/web/api/location/reload)。

    The Location.reload() method reloads the resource from the current
    URL. Its optional unique parameter is a Boolean, which, when it is
    true, causes the page to always be reloaded from the server. If it is
    false or not specified, the browser may reload the page from its
    cache.

    这意味着有两种方法：

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

    1
    location.reload(true);

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

    1
    2
    location.reload(false);
    location.reload();

    如果您想将它与jquery和监听事件结合起来，我建议您使用".on()"方法而不是".click"或其他事件包装器，例如，更合适的解决方案是：

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

    我发现

    1
    window.location.href="";

    或

    1
    window.location.href = null;

    同时刷新页面。

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

    相关讨论

    可以使用javascript location.reload()方法。此方法接受布尔参数。true或false。如果参数为true，则页面总是从服务器重新加载。如果它是false；这是默认值，或者使用空参数浏览器从缓存中重新加载页面。

    带true参数

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

    带default/false参数

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

    使用jQuery

    1
    2
    3
    4
    5
    <button id="Reloadpage">Reload page</button>
    <script type="text/javascript">
        $('#Reloadpage').click(function() {
            location.reload();
        });
    相关讨论

    您不需要jquery中的任何内容，要使用纯javascript重新加载页面，只需在location属性上使用reload函数，如下所示：

    1
    window.location.reload();

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

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

    1
    window.location.reload(true);

    另外，如果您已经在窗口范围内，则可以除去窗口并执行以下操作：

    1
    location.reload();

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

    我想在单击oh an h3时隐藏一个iframe，对我来说它起作用了，但我无法单击允许我首先查看iframe的项目，除非我手动刷新浏览器…不理想。

    我尝试了以下方法：

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

    将普通的jane javascript与jquery混合应该可以工作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 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>Close Player`);
            $("h3").enter code hereclick(hide);
    }

    // View Player
    $("#id-to-be-clicked").click(iFrameInsert);

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

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

    ~ Wikipedia ~

    因此，您将了解jQuery的基础，或者jQuery是基于JavaScript的。所以当涉及到简单的事情时，使用纯JavaScript会更好。

    但如果您需要一个jquery解决方案，这里有一个。

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

    使用

    1
    location.reload();

    或

    1
    window.location.reload();
    相关讨论

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

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

    简单的javascript解决方案：

    1
     location = location;

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

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

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

    如果您只想让jquery对您的代码有感觉，而不关心代码的速度/性能，那么就使用它。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      $(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.

    它是JavaScript中最短的。

    1
    location = '';