ฉันจะรีเฟรชหน้าเว็บด้วย jQuery ได้อย่างไร

ฉันจะรีเฟรชหน้าเว็บด้วย jQuery ได้อย่างไร

ใช้location.reload():

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

reload()ฟังก์ชั่นใช้เวลาพารามิเตอร์ตัวเลือกที่สามารถตั้งค่าเพื่อtrueที่จะบังคับให้โหลดจากเซิร์ฟเวอร์มากกว่าแคช พารามิเตอร์เริ่มต้นเป็นfalseดังนั้นโดยค่าเริ่มต้นหน้าอาจโหลดจากแคชของเบราว์เซอร์

สิ่งนี้ควรใช้กับเบราว์เซอร์ทั้งหมดแม้ว่าจะไม่มี jQuery:

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)

   ถ้าเราต้องการที่จะดึงเอกสารจากเว็บเซิร์ฟเวอร์อีกครั้ง (เช่นที่เนื้อหาของเอกสารมีการเปลี่ยนแปลงแบบไดนามิก) 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>

ฉันจะทำงานได้หลายวิธี

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

หากต้องการโหลดหน้าซ้ำด้วย jQuery ให้ทำ:

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

วิธีการที่ฉันใช้คือ Ajax jQuery ฉันทดสอบบนChrome 13 แล้วฉันใส่รหัสลงในตัวจัดการที่จะทริกเกอร์การโหลดใหม่ URL ที่เป็น""ซึ่งหมายความว่าหน้านี้

หากหน้าปัจจุบันถูกโหลดโดยคำขอ POST คุณอาจต้องการใช้

window.location = window.location.pathname;

แทน

window.location.reload();

เพราะwindow.location.reload()จะแจ้งให้ยืนยันหากมีการเรียกบนหน้าเว็บที่โหลดโดยคำขอ POST

คำถามควรจะเป็น

วิธีรีเฟรชหน้าด้วยJavaScript

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

คุณมีทางเลือกมากมาย

คุณอาจต้องการใช้

location.reload(forceGet)

forceGet เป็นบูลีนและเป็นตัวเลือก

ค่าเริ่มต้นเป็นเท็จซึ่งโหลดหน้าจากแคช

ตั้งค่าพารามิเตอร์นี้เป็นจริงหากคุณต้องการบังคับให้เบราว์เซอร์รับหน้าจากเซิร์ฟเวอร์เพื่อกำจัดแคชเช่นกัน

หรือเพียงแค่

location.reload()

หากคุณต้องการแคชอย่างรวดเร็วและง่ายดาย

สามวิธีที่มีพฤติกรรมที่เกี่ยวข้องกับแคชแตกต่างกัน:

• location.reload(true)

  ในเบราว์เซอร์ที่ใช้forcedReloadพารามิเตอร์ของlocation.reload()ให้โหลดซ้ำโดยดึงสำเนาใหม่ของหน้าและทรัพยากรทั้งหมด (สคริปต์สไตล์ชีทรูปภาพ ฯลฯ ) จะไม่ให้บริการทรัพยากรใด ๆจากแคช - รับสำเนาใหม่จากเซิร์ฟเวอร์โดยไม่ส่งif-modified-sinceหรือif-none-matchส่วนหัวในคำขอ

  เทียบเท่ากับผู้ใช้ที่ทำการ "โหลดซ้ำอย่างหนัก" ในเบราว์เซอร์ที่เป็นไปได้

  โปรดทราบว่าผ่านtrueไปlocation.reload()ได้รับการสนับสนุนใน Firefox (ดูMDN ) และ Internet Explorer (ดูMSDN ) แต่ไม่ได้รับการสนับสนุนในระดับสากลและไม่ได้เป็นส่วนหนึ่งของW3 HTML 5 สเปคหรือข้อมูลจำเพาะ W3 ร่าง HTML 5.1หรือWHATWG HTML Living มาตรฐาน

  ในเบราว์เซอร์ unsupporting เช่น 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() เพื่อสร้างผลของผู้ใช้โดยคลิกปุ่ม 'รีเฟรช' โดยสุจริต

window.location.reload() จะโหลดซ้ำจากเซิร์ฟเวอร์และจะโหลดข้อมูลสคริปต์รูปภาพและอื่น ๆ อีกทั้งหมด

ดังนั้นหากคุณต้องการรีเฟรช HTML ค่าwindow.location = document.URLจะกลับมาเร็วกว่าและมีปริมาณการใช้น้อย แต่จะไม่โหลดหน้าซ้ำหากมีแฮช (#) ใน URL

Loadฟังก์ชั่นjQuery ยังสามารถทำการรีเฟรชหน้า:

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

เนื่องจากคำถามเป็นเรื่องทั่วไปให้ลองหาคำตอบสำหรับคำตอบ:

โซลูชัน JavaScript ธรรมดา ๆ :

วิธีที่ง่ายที่สุดคือโซลูชันบรรทัดเดียวในวิธีที่เหมาะสม:

location.reload();

สิ่งที่หลายคนหายไปที่นี่เพราะพวกเขาหวังว่าจะได้รับ "คะแนน" บางส่วนก็คือฟังก์ชั่น reload () นั้นมีบูลีนเป็นพารามิเตอร์ (รายละเอียด: https://developer.mozilla.org/en-US/docs/Web / API / สถานที่ / โหลดซ้ำ )

กระบวนการ Location.reload () วิธีการโหลดทรัพยากรจาก URL ปัจจุบัน พารามิเตอร์ที่ไม่ซ้ำกันที่เป็นตัวเลือกคือบูลีนซึ่งเมื่อเป็นจริงจะทำให้เพจโหลดซ้ำจากเซิร์ฟเวอร์เสมอ หากเป็นเท็จหรือไม่ได้ระบุเบราว์เซอร์อาจโหลดซ้ำหน้าเว็บจากแคช

ซึ่งหมายความว่ามีสองวิธี:

โซลูชันที่ 1: บังคับให้โหลดหน้าปัจจุบันจากเซิร์ฟเวอร์อีกครั้ง

location.reload(true);

โซลูชันที่ 2: โหลดซ้ำจากแคชหรือเซิร์ฟเวอร์ (ขึ้นอยู่กับเบราว์เซอร์และการกำหนดค่าของคุณ)

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

และถ้าคุณต้องการที่จะรวมมันกับ jQuery ฟังเหตุการณ์ฉันขอแนะนำให้ใช้วิธีการ ".on ()" แทน ".click" หรือ wrappers เหตุการณ์อื่น ๆ เช่นการแก้ปัญหาที่เหมาะสมมากขึ้นจะเป็น:

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

นี่คือวิธีแก้ปัญหาที่โหลดหน้าเว็บซ้ำอีกครั้งโดยใช้ jQuery window.location = window.locationมันหลีกเลี่ยงการสั่นไหวที่เกิดจากการ ตัวอย่างนี้แสดงเพจที่โหลดซ้ำอย่างต่อเนื่องเช่นเดียวกับในแดชบอร์ด มันได้รับการทดสอบการต่อสู้และใช้งานบนจอแสดงผลข้อมูลใน 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>

หมายเหตุ:

• การใช้งาน$.ajaxโดยตรง$.get('',function(data){$(document.body).html(data)}) จะทำให้ไฟล์ css / js ถูกดักจับแม้ว่าคุณจะใช้cache: trueนั่นเป็นเหตุผลที่เราใช้parseHTML
• parseHTMLจะไม่พบbodyแท็กเพื่อให้ร่างกายของคุณต้องไปใน div พิเศษฉันหวังว่านักเก็ตแห่งความรู้นี้จะช่วยคุณได้หนึ่งวันคุณสามารถเดาได้ว่าเราเลือก id สำหรับสิ่งนั้นได้อย่างไรdiv
• ใช้http-equiv="refresh"ในกรณีที่มีสิ่งผิดปกติกับ javascript / hiccup จากนั้นหน้าจะโหลดซ้ำโดยที่คุณไม่ได้รับสาย
• วิธีนี้อาจทำให้หน่วยความจำรั่วอย่างใดการhttp-equivรีเฟรชจะแก้ไข

ฉันพบ

window.location.href = "";

หรือ

window.location.href = null;

ยังทำให้การรีเฟรชหน้า

สิ่งนี้ทำให้ง่ายต่อการโหลดหน้าซ้ำเพื่อลบแฮชออก นี่เป็นสิ่งที่ดีมากเมื่อฉันใช้ AngularJS ในเครื่องมือจำลอง iOS ดังนั้นฉันจึงไม่จำเป็นต้องเรียกใช้แอปอีกครั้ง

คุณสามารถใช้ วิธี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>

คุณไม่ต้องการอะไรจาก jQuery เพื่อโหลดหน้าเว็บใหม่โดยใช้จาวาสคริปต์แท้ๆเพียงแค่ใช้ฟังก์ชั่นรีโหลดบนคุณสมบัติตำแหน่งเช่นนี้:

window.location.reload();

โดยค่าเริ่มต้นจะเป็นการโหลดหน้าเว็บใหม่โดยใช้แคชเบราว์เซอร์ (ถ้ามี) ...

หากคุณต้องการบังคับให้โหลดหน้าซ้ำเพียงแค่ส่งค่าที่แท้จริงไปยังวิธีการโหลดซ้ำตามด้านล่าง ...

window.location.reload(true);

นอกจากนี้หากคุณอยู่ในขอบเขตของหน้าต่างคุณสามารถกำจัดหน้าต่างและทำ:

location.reload();

ใช้

location.reload();

หรือ

window.location.reload();

ใช้onclick="return location.reload();"ภายในแท็กปุ่ม

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

หากคุณใช้ jQuery และต้องการรีเฟรชให้ลองเพิ่ม jQuery ของคุณในฟังก์ชัน javascript:

ฉันต้องการซ่อน iframe จากหน้าเว็บเมื่อคลิก oh an h3สำหรับฉันมันใช้งานได้ แต่ฉันไม่สามารถคลิกรายการที่อนุญาตให้ฉันดู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);

คำตอบทั้งหมดที่นี่ดี เนื่องจากคำถามที่ระบุเกี่ยวกับการโหลดหน้าใหม่ด้วยjQueryฉันแค่คิดว่าจะเพิ่มสิ่งเพิ่มเติมสำหรับผู้อ่านในอนาคต

jQueryเป็นไลบรารี JavaScriptข้ามแพลตฟอร์มที่ออกแบบมาเพื่อให้การสคริปต์ HTML ฝั่งไคลเอ็นต์ทำได้ง่ายขึ้น

^{~ Wikipedia ~}

ดังนั้นคุณจะเข้าใจว่ารากฐานของ jQuery, หรือ jQuery ขึ้นอยู่กับ จาวาสคริปต์. ดังนั้นไปกับบริสุทธิ์จาวาสคริปต์ เป็นวิธีที่ดีกว่าเมื่อมันมาถึงสิ่งที่เรียบง่าย

แต่ถ้าคุณต้องการ jQuery ทางออกนี่คือหนึ่ง

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

มีหลายวิธีในการโหลดหน้าปัจจุบัน แต่อย่างใดโดยใช้วิธีการเหล่านั้นคุณสามารถดูหน้าที่อัปเดต แต่ไม่มีค่าแคชไม่กี่จะอยู่ที่นั่นดังนั้นเอาชนะปัญหานั้นหรือหากคุณต้องการทำการร้องขออย่างหนักจากนั้นใช้รหัสด้านล่าง

    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

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

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

โซลูชัน Javascript แบบง่าย:

 location = location; 

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

อาจสั้นที่สุด (12 ตัวอักษร) - ใช้ประวัติการใช้งาน

history.go()

คุณสามารถเขียนมันได้สองวิธี อันดับที่ 1 เป็นวิธีมาตรฐานในการโหลดหน้าเว็บที่เรียกว่าการรีเฟรชแบบง่าย

location.reload(); //simple refresh

และอีกชื่อหนึ่งเรียกว่า การฟื้นฟูอย่างหนัก ที่นี่คุณผ่านนิพจน์บูลีนและตั้งค่าเป็นจริง การทำเช่นนี้จะโหลดหน้าเว็บที่ทำลายแคชรุ่นเก่าและแสดงเนื้อหาจากศูนย์

location.reload(true);//hard refresh

มันสั้นที่สุดใน JavaScript

window.location = '';

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

นี่บรรทัดของรหัสบางอย่างที่คุณสามารถใช้เพื่อโหลดหน้าเว็บใช้ jQuery

มันใช้ wrapper 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>