คุณสมบัติ href ของ Base
คุณสมบัติ href ของ <base> HTML tag ใช้ระบุ base URL สำหรับ relative URLs ทั้งหมดในเอกสาร HTML ปัจจุบัน มีได้สูงสุด 1 <base> tag ต่อเอกสาร คุณสมบัติ Base.href คืนค่าของแอตทริบิวต์ href ใน base element
ไวยากรณ์ (Syntax)
การกำหนดค่า href
baseObject.href = URL
พารามิเตอร์: URL - base URL
การอ่านค่า href
baseObject.href
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยนและอ่านค่า base href
<!DOCTYPE html>
<html>
<head>
<base id="myBase" href="https://www.bing.com">
</head>
<body>
<a href="/images">IMAGES</a>
<p>Click the below button to change href value of the above link</p>
<button onclick="SetHref()">SET IT</button>
<button onclick="GetHref()">GET IT</button>
<p id="Sample"></p>
<script>
function SetHref() {
document.getElementById("myBase").href = "https://duckduckgo.com";
document.getElementById("Sample").innerHTML = "Base URL was changed from bing.com to duckduckgo.com";
}
function GetHref() {
var x = document.getElementById("myBase").href;
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html>
ผลลัพธ์
เริ่มต้น: base href = bing.com, ลิงก์ IMAGES ชี้ไป https://www.bing.com/images
คลิก SET IT: เปลี่ยน base href เป็น duckduckgo.com, ลิงก์ IMAGES กลายเป็น https://duckduckgo.com/images
คลิก GET IT: แสดง base href ปัจจุบัน
คำอธิบายเพิ่มเติม
<base href="https://example.com/">ทำให้ relative URLs resolve จาก base นี้- ตัวอย่าง:
<a href="page.html">→https://example.com/page.html <a href="/path/page.html">→https://example.com/path/page.html<a href="../page.html">→https://example.com/page.html(ขึ้นหนึ่งระดับจาก base path)- Absolute URLs (ที่มี protocol) ไม่ได้รับผลกระทบจาก base href
- การเปลี่ยน base.href แบบไดนามิกมีผลต่อ relative links ใหม่ที่สร้างหลังเปลี่ยน
