ตำแหน่งหน้าต่าง JavaScript

สารบัญ

แสดงสารบัญ

สามารถใช้วัตถุ window.location เพื่อรับได้ ที่อยู่หน้าปัจจุบัน (URL) และเพื่อเปลี่ยนเส้นทางเบราว์เซอร์ไปยังหน้าใหม่

ตำแหน่งหน้าต่าง

อ็อบเจ็กต์ window.location สามารถเขียนได้โดยไม่ต้องใช้คำนำหน้าหน้าต่าง

ตัวอย่างบางส่วน:

window.location.href ส่งคืน href (URL) ของหน้าปัจจุบัน
window.location.hostname ส่งคืนชื่อโดเมนของโฮสต์เว็บ
window.location.pathname ส่งคืนเส้นทางและชื่อไฟล์ของหน้าปัจจุบัน
window.location.protocol ส่งคืนโปรโตคอลเว็บที่ใช้ (http:หรือ https:)
window.location.assign() โหลดเอกสารใหม่

ตำแหน่งของหน้าต่างอ้างอิง

window.location.href คุณสมบัติส่งกลับ URL ของหน้าปัจจุบัน

ตัวอย่าง

แสดง href (URL) ของหน้าปัจจุบัน:

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

ผลลัพธ์คือ:

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>

ชื่อโฮสต์ตำแหน่งหน้าต่าง

คุณสมบัติ window.location.hostname ส่งคืนชื่อของโฮสต์อินเทอร์เน็ต (ของหน้าปัจจุบัน)

ตัวอย่าง

แสดงชื่อโฮสต์:

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

ผลลัพธ์คือ:


<script>
document.write("Page hostname is " + location.hostname);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Page hostname is: " + window.location.hostname;
</script>

</body>
</html>

ชื่อพาธตำแหน่งของหน้าต่าง

window.location.pathname คุณสมบัติส่งกลับชื่อเส้นทางของ หน้าปัจจุบัน

ตัวอย่าง

แสดงชื่อเส้นทางของ URL ปัจจุบัน:

 document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

ผลลัพธ์คือ:


<script>
document.write("Page path is " + location.pathname);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>

</body>
</html>

โปรโตคอลตำแหน่งหน้าต่าง

คุณสมบัติ window.location.protocol ส่งคืนโปรโตคอลเว็บของเพจ

ตัวอย่าง

แสดงโปรโตคอลเว็บ:

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

ผลลัพธ์คือ:


<script>
document.write("Page protocol is " + location.protocol);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>

</body>
</html>

พอร์ตตำแหน่งหน้าต่าง

คุณสมบัติ window.location.port ส่งคืนหมายเลขของโฮสต์อินเทอร์เน็ต พอร์ต (ของหน้าปัจจุบัน)

ตัวอย่าง

แสดงชื่อโฮสต์:

document.getElementById("demo").innerHTML =
"Port 
  number is " + window.location.port;

ผลลัพธ์คือ:


<script>
document.write("Port number is " + location.port);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<p><b>Note: </b>If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>

<script>
document.getElementById("demo").innerHTML = 
"The URL port number of the current page is: " + window.location.port;
</script>

</body>
</html>

เบราว์เซอร์ส่วนใหญ่จะไม่แสดงหมายเลขพอร์ตเริ่มต้น (80 สำหรับ http และ 443 สำหรับ https)

กำหนดตำแหน่งหน้าต่าง

window.location.assign() วิธีการโหลดเอกสารใหม่

ตัวอย่าง

โหลดเอกสารใหม่:

<html>
<head>
<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
 }
</script>
</head>
<body>

<input type="button" value="Load new document"
onclick="newDoc()">

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>