Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด reload() ของ Location ใน HTML DOM

เมธอด reload() ของ Location ใช้โหลดหน้าปัจจุบันใหม่ (reload) ทำงานเหมือนปุ่ม Refresh ในเบราว์เซอร์

ไวยากรณ์ (Syntax)

location.reload(forceGetParameter)

พารามิเตอร์ forceGetParameter

ค่ารายละเอียด
trueโหลดใหม่จากเซิร์ฟเวอร์ (bypass cache)
falseโหลดใหม่จากแคชเบราว์เซอร์ (ค่าเริ่มต้น)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างโหลดหน้าใหม่เมื่อกดปุ่ม Reload:

<!DOCTYPE html>
<html>
<head>
<title>Location reload()</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>Location-reload()</legend>
    <label for="urlSelect">Email: </label>
    <input type="email" id="emailSelect"><br>
    <label for="urlSelect">Password: </label>
    <input type="password" id="passSelect"><br>
    <input type="button" onclick="doReload()" value="Reload">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var emailSelect = document.getElementById("emailSelect");
  var passSelect = document.getElementById("passSelect");
  divDisplay.textContent = 'Do not reload, all the details will be lost';
  
  function doReload() {
    alert('Page reloaded, all the details are lost');
    location.reload();
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม "Reload": แสดงฟอร์มกรอกอีเมล/รหัสผ่าน พร้อมข้อความเตือน

หลังคลิกปุ่ม "Reload": แสดง alert "Page reloaded, all the details are lost" แล้วหน้าถูกโหลดใหม่ (ข้อมูลหาย)

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้