ใน HTML URL ทั่วไปจะแสดงได้หลายวิธี:
URL ที่เกี่ยวข้อง:
ตัวอย่าง.php
สาธิต/example.php
./example.php
../../example.php
/example.php
URL ที่สมบูรณ์:
http://dancewithnet.com/example.php
http://dancewithnet.com:80/example.php
https://dancewithnet.com/example.php
ในเวลาเดียวกัน มีค่าแอตทริบิวต์องค์ประกอบจำนวนมากใน HTML ที่เป็น URL โดยทั่วไปมีสองวิธีในการรับค่าแอตทริบิวต์ URL เหล่านี้โดยใช้ JavaScript:
URL ที่แท้จริงของเพจในขณะนี้คือ http://dancewithnet.com/
<สคริปต์>
var oA = document.getElementById('ตัวอย่าง-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
เราหวังว่าจะได้รับ URL ที่สมบูรณ์โดยการเข้าถึงแอตทริบิวต์โดยตรง และรับค่าแอตทริบิวต์ดั้งเดิมผ่านวิธี getAttribute อันที่จริง นี่เป็นผลลัพธ์ที่ค่อนข้างดี ในบรรดาเบราว์เซอร์ระดับ A ทั้งหมด มีเพียง Firefox เท่านั้นที่สามารถรับผลลัพธ์นี้ได้สำเร็จ เช่นเดียวกับ IE8 เบราว์เซอร์อื่นๆ มีกรณีพิเศษไม่มากก็น้อย โปรดดู ตัวอย่างการสาธิต สำหรับคุณลักษณะเฉพาะที่มีองค์ประกอบอยู่
ปัญหาในเบราว์เซอร์ส่วนใหญ่คือทั้งสองวิธีส่งคืนค่าแอตทริบิวต์ดั้งเดิม แต่ในแอปพลิเคชันจริง สิ่งที่มักจำเป็นคือ URL ที่สมบูรณ์ วิธีแก้ไขใน " การจัดการกับค่า HREF ที่ไม่เข้าเกณฑ์ " เป็นวิธีแก้ไขที่ค่อนข้างง่าย ซึ่งง่ายมากถ้าคุณไม่คำนึงถึงความแตกต่างในโค้ดเบราว์เซอร์:
<การกระทำของแบบฟอร์ม = "example.php" id = "ตัวอย่างแบบฟอร์ม">
URL ที่แท้จริงของเพจในขณะนี้คือ http://dancewithnet.com/
<สคริปต์>
var oForm = document.getElementById('ตัวอย่างแบบฟอร์ม');
//IE6, IE7, ซาฟารี, Chrome, Opera
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
//วิธีแก้ปัญหาทั่วไปสำหรับการรับ URL ที่สมบูรณ์
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = ฟังก์ชั่น (oEl, sAttr) {
var sUrl = oEl[sAttr],
โอเค
bDo = เท็จ;
//ไม่ว่าจะเป็นเวอร์ชันก่อน IE8 หรือไม่
//http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
//http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx
/*@cc_on
พยายาม{
bDo = @_jscript_version < 5.8 ?true : @false;
} จับ (จ) {
bDo = เท็จ;
-
-
//หากเป็น Safari, Chrome และ Opera
if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
||. /^ฟังก์ชั่น (/.test([].sort)){
bDo = จริง;
-
ถ้า(bDo){
oD = document.createElement('div');
-
//ผลลัพธ์ของการดำเนินการ DOM จะไม่เปลี่ยนแปลง
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.ผนวกเด็ก(oA);
-
oD.innerHTML = [''].join('');
sUrl = oD.firstChild.href;
-
กลับ sUrl;
-
มีสิ่งที่น่าสนใจเพิ่มเติมเกี่ยวกับเบราว์เซอร์ยุคก่อนประวัติศาสตร์ IE6 และ IE7 ที่ได้รับจากทั้งสองวิธีในองค์ประกอบ HTML A, AREA และ IMG ล้วนเป็น URL ที่สมบูรณ์ โชคดี ที่ Microsoft มีพารามิเตอร์ที่สองสำหรับ getAttribute ปัญหาสามารถแก้ไขได้ และในเวลาเดียวกัน ปัญหาที่ทั้งสองวิธีที่กล่าวถึงข้างต้นส่งคืนแอตทริบิวต์ดั้งเดิมก็สามารถแก้ไขได้สำหรับองค์ประกอบ IFEAM และ LINK:
ข้อความต้นฉบับ: http://dancewithnet.com/2009/07/27/get-right-url-from-html/
URL ที่แท้จริงของเพจในขณะนี้คือ http://dancewithnet.com/
<สคริปต์>
var oA = document.getElementById('ตัวอย่าง-a')
oLink = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'example.php';
oLink.href == 'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';