في HTML، يتم تمثيل عناوين URL الشائعة بعدة طرق:
عنوان URL النسبي:
example.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:
<a href="example.php" id="example-a">عنوان URL المطلق للصفحة في هذا الوقت هو http://dancewithnet.com/</a>
<النص البرمجي>
var oA = document.getElementById('example-a');
oA.href == 'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>
نأمل في الحصول على عنوان URL المطلق الكامل من خلال الوصول المباشر إلى السمة، والحصول على قيمة السمة الأصلية من خلال طريقة getAttribute. في الواقع، تعد هذه نتيجة مثالية نسبيًا من بين جميع متصفحات المستوى A، حيث يمكن لمتصفح Firefox فقط الحصول على هذه النتيجة بنجاح. مثل متصفح IE8، تحتوي المتصفحات الأخرى على حالات خاصة إلى حد ما. يرجى الاطلاع على الأمثلة التوضيحية لمعرفة السمات المحددة للعناصر الموجودة.
تكمن المشكلة في معظم المتصفحات في أن كلتا الطريقتين تُرجعان قيمة السمة الأصلية، ولكن في التطبيقات الفعلية، ما نحتاجه غالبًا هو عنوان URL المطلق. الحل في " التعامل مع قيم HREF غير المؤهلة " معقد للغاية، إليك حل بسيط نسبيًا. وهو أمر بسيط للغاية إذا كنت لا تأخذ في الاعتبار الاختلاف في كود المتصفح:
<form action="example.php" id="example-form">
عنوان URL المطلق للصفحة في هذا الوقت هو http://dancewithnet.com/</form>
<النص البرمجي>
var oForm = document.getElementById('example-form');
//IE6، IE7، سفاري، كروم، أوبرا
oForm.action == 'example.php';
oA.getAttribute('action') == 'example.php';
// الحل العام للحصول على عنوان URL المطلق
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';
getQualifyURL = function(oEl,sAttr){
فار sUrl = oEl[sAttr],
التطوير التنظيمي،
ب دو = خطأ؛
// سواء كان إصدارًا قبل 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;
}قبض(ه){
ب دو = خطأ؛
}
@*/
//إذا كان Safari وChrome وOpera
إذا(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
|| /^ الدالة (/.test([].sort)){
بدو = صحيح؛
}
إذا (ب دو) {
oD = document.createElement('div');
/*
// لن تتغير نتيجة عملية DOM
var oA = document.createElement('a');
oA.href = oEl[sAttr];
oD.appendChild(oA);
*/
oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
sUrl = oD.firstChild.href;
}
إرجاع URL؛
}
</script>
هناك بعض الأشياء الأكثر إثارة للاهتمام حول متصفحي ما قبل التاريخ IE6 وIE7. إن قيم السمات التي تم الحصول عليها بواسطة الطريقتين في عناصر HTML A وAREA وIMG كلها عناوين URL مطلقة، ولحسن الحظ ، توفر Microsoft معلمة ثانية لـ getAttribute يمكن حل المشكلة، وفي الوقت نفسه، يمكن أيضًا حل مشكلة إرجاع السمات الأصلية بالطريقتين المذكورتين أعلاه لعناصر IFEAM وLINK:
النص الأصلي: http://dancewithnet.com/2009/07/27/get-right-url-from-html/
<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">عنوان URL المطلق للصفحة في هذا الوقت هو http://dancewithnet.com/</a>
<النص البرمجي>
فار الزراعة العضوية = document.getElementById('example-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';
</script>