~Onlooker
2011-03-23 11:55
采纳率: 0%
浏览 468
已采纳

我如何用 jQuery 刷新页面?

How can I refresh a page with jQuery?

转载于:https://stackoverflow.com/questions/5404839/how-can-i-refresh-a-page-with-jquery

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

20条回答 默认 最新

  • MAO-EYE 2011-03-23 11:57
    已采纳

    Use location.reload():

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

    The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser's cache.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 谁还没个明天 2011-03-23 11:57

    This should work on all browsers even without jQuery:

    location.reload();
    
    评论
    解决 无用
    打赏 举报
  • derek5. 2011-03-23 12:01

    The question should be,

    How to refresh a page with JavaScript

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

    You're spoiled for choice.

    评论
    解决 无用
    打赏 举报
  • 喵-见缝插针 2011-09-30 11:00

    To reload a page with jQuery, do:

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

    The approach here that I used was Ajax jQuery. I tested it on Chrome 13. Then I put the code in the handler that will trigger the reload. The URL is "", which means this page.

    评论
    解决 无用
    打赏 举报
  • hurriedly% 2012-06-22 11:58

    If the current page was loaded by a POST request, you may want to use

    window.location = window.location.pathname;
    

    instead of

    window.location.reload();
    

    because window.location.reload() will prompt for confirmation if called on a page that was loaded by a POST request.

    评论
    解决 无用
    打赏 举报
  • perhaps? 2013-06-23 09:47

    There are a lot of ways to refresh a page with 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)

      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.

    You can continue the list being creative:

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

    </div>
    
    评论
    解决 无用
    打赏 举报
  • 乱世@小熊 2013-06-24 20:08

    The jQuery Load function can also perform a page refresh:

    $('body').load('views/file.html', function () {
        $(this).fadeIn(5000);
    });
    
    评论
    解决 无用
    打赏 举报
  • Memor.の 2013-07-25 14:27

    You may want to use

    location.reload(forceGet)
    

    forceGet is a boolean and optional.

    The default is false which reloads the page from the cache.

    Set this parameter to true if you want to force the browser to get the page from the server to get rid of the cache as well.

    Or just

    location.reload()
    

    if you want quick and easy with caching.

    评论
    解决 无用
    打赏 举报
  • 叼花硬汉 2013-10-13 20:32

    window.location.reload() will reload from the server and will load all your data, scripts, images, etc. again.

    So if you just want to refresh the HTML, the window.location = document.URL will return much quicker and with less traffic. But it will not reload the page if there is a hash (#) in the URL.

    评论
    解决 无用
    打赏 举报
  • larry*wei 2015-10-02 09:25

    As the question is generic, let's try to sum up possible solutions for the answer:

    Simple plain JavaScript Solution:

    The easiest way is a one line solution placed in an appropriate way:

    location.reload();
    

    What many people are missing here, because they hope to get some "points" is that the reload() function itself offers a Boolean as a parameter (details: 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.

    This means there are two ways:

    Solution1: Force reloading the current page from the server

    location.reload(true);
    

    Solution2: Reloading from cache or server (based on browser and your config)

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

    And if you want to combine it with jQuery an listening to an event, I would recommend using the ".on()" method instead of ".click" or other event wrappers, e.g. a more proper solution would be:

    $('#reloadIt').on('eventXyZ', function() {
        location.reload(true);
    });
    
    评论
    解决 无用
    打赏 举报
  • 衫裤跑路 2015-11-14 11:22

    Three approaches with different cache-related behaviours:

    • location.reload(true)

      In browsers that implement the forcedReload parameter of location.reload(), reloads by fetching a fresh copy of the page and all of its resources (scripts, stylesheets, images, etc.). Will not serve any resources from the cache - gets fresh copies from the server without sending any if-modified-since or if-none-match headers in the request.

      Equivalent to the user doing a "hard reload" in browsers where that's possible.

      Note that passing true to location.reload() is supported in Firefox (see MDN) and Internet Explorer (see MSDN) but is not supported universally and is not part of the W3 HTML 5 spec, nor the W3 draft HTML 5.1 spec, nor the WHATWG HTML Living Standard.

      In unsupporting browsers, like Google Chrome, location.reload(true) behaves the same as location.reload().

    • location.reload() or location.reload(false)

      Reloads the page, fetching a fresh, non-cached copy of the page HTML itself, and performing RFC 7234 revalidation requests for any resources (like scripts) that the browser has cached, even if they are fresh are RFC 7234 permits the browser to serve them without revalidation.

      Exactly how the browser should utilise its cache when performing a location.reload() call isn't specified or documented as far as I can tell; I determined the behaviour above by experimentation.

      This is equivalent to the user simply pressing the "refresh" button in their browser.

    • location = location (or infinitely many other possible techniques that involve assigning to location or to its properties)

      Only works if the page's URL doesn't contain a fragid/hashbang!

      Reloads the page without refetching or revalidating any fresh resources from the cache. If the page's HTML itself is fresh, this will reload the page without performing any HTTP requests at all.

      This is equivalent (from a caching perspective) to the user opening the page in a new tab.

      However, if the page's URL contains a hash, this will have no effect.

      Again, the caching behaviour here is unspecified as far as I know; I determined it by testing.

    So, in summary, you want to use:

    • location = location for maximum use of the cache, as long as the page doesn't have a hash in its URL, in which case this won't work
    • location.reload(true) to fetch new copies of all resources without revalidating (although its not universally supported and will behave no differently to location.reload() in some browsers, like Chrome)
    • location.reload() to faithfully reproduce the effect of the user clicking the 'refresh' button.
    评论
    解决 无用
    打赏 举报
  • MAO-EYE 2016-05-17 22:30

    Here is a solution that asynchronously reloads a page using jQuery. It avoids the flicker caused by window.location = window.location. This example shows a page that reloads continuously, as in a dashboard. It is battle-tested and is running on an information display TV in Times Square.

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

    Notes:

    • Using $.ajax directly like $.get('',function(data){$(document.body).html(data)}) causes css/js files to get cache-busted, even if you use cache: true, that's why we use parseHTML
    • parseHTML will NOT find a body tag so your whole body needs to go in an extra div, I hope this nugget of knowledge helps you one day, you can guess how we chose the id for that div
    • Use http-equiv="refresh" just in case something goes wrong with javascript/server hiccup, then the page will STILL reload without you getting a phone call
    • This approach probably leaks memory somehow, the http-equiv refresh fixes that
    评论
    解决 无用
    打赏 举报
  • derek5. 2016-09-15 16:04

    I found

    window.location.href = "";
    

    or

    window.location.href = null;
    

    also makes a page refresh.

    This makes it very much easier to reload the page removing any hash. This is very nice when I am using AngularJS in the iOS simulator, so that I don't have to rerun the app.

    评论
    解决 无用
    打赏 举报
  • YaoRaoLov 2018-03-05 17:18

    You can use JavaScript location.reload() method. This method accepts a boolean parameter. true or false. If the parameter is true; the page always reloaded from the server. If it is false; which is the default or with empty parameter browser reload the page from it's cache.

    With true parameter

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

    With default/ false parameter

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

    Using jquery

    <button id="Reloadpage">Reload page</button>
    <script type="text/javascript">
        $('#Reloadpage').click(function() {
            location.reload();
        }); 
    </script>
    
    评论
    解决 无用
    打赏 举报
  • 衫裤跑路 2018-05-23 10:57

    Use onclick="return location.reload();" within the button tag.

    <button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
    
    评论
    解决 无用
    打赏 举报
  • Lotus@ 2018-05-27 04:53

    You don't need anything from jQuery, to reload a page using pure JavaScript, just use reload function on location property like this:

    window.location.reload();
    

    By default, this will reload the page using the browser cache (if exists)...

    If you'd like to do force reload the page, just pass a true value to reload method like below...

    window.location.reload(true);
    

    Also if you are already in window scope, you can get rid of window and do:

    location.reload();
    
    评论
    解决 无用
    打赏 举报
  • 妄徒之命 2018-07-10 18:29

    Simple Javascript Solution:

     location = location; 
    

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

    </div>
    
    评论
    解决 无用
    打赏 举报
  • 7*4 2018-07-25 07:39

    If you are using jQuery and want to refresh, then try adding your jQuery in a javascript function:

    I wanted to hide an iframe from a page when clicking oh an h3, for me it worked but I wasn't able to click the item that allowed me to view the iframe to begin with unless I refreshed the browser manually...not ideal.

    I tried the following:

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

    Mixing plain Jane javascript with your jQuery should work.

    // 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);
    
    评论
    解决 无用
    打赏 举报
  • Memor.の 2018-09-19 06:56

    Here are some lines of code you can use to reload the page using jQuery.

    It uses the jQuery wrapper and extracts the native dom element.

    Use this if you just want a jQuery feeling on your code and you don't care about speed/performance of the code.

    Just pick from 1 to 10 that suits your needs or add some more based on the pattern and answers before this.

    <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>
    
    评论
    解决 无用
    打赏 举报
  • 撒拉嘿哟木头 2018-10-27 02:06

    It is shortest in JavaScript.

    location = '';
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题