Di HTML, ada banyak URL umum:
URL relatif:
example.php
demo/example.php
./example.php
../../example.php
/Example.php
URL absolut:
http://danceWithnet.com/example.php
http://danceWithnet.com:80/example.php
https://danceWithnet.com/example.php
Pada saat yang sama, ada sejumlah besar nilai atribut elemen dalam HTML. Secara umum, ada dua cara untuk mendapatkan nilai atribut URL ini menggunakan JavaScript:
<a href = example.php id = example-a> saat ini halaman benar-benar url http://dancewithnet.com/ </a>
<script>
var oa = document.geteLementById ('contoh-a');
oa.href == 'http://danceWithnet.com/example.php';
oa.getAttribute ('href') == 'example.php';
</script>
Kami berharap dapat memperoleh URL absolut lengkap dengan secara langsung mengakses atribut dan memperoleh nilai atribut aslinya melalui metode GetAttribute. Bahkan, ini adalah hasil yang relatif ideal. Di antara semua browser A-level, hanya Firefox dan IE8 yang berhasil mendapatkan hasil ini. Browser lain memiliki keadaan yang kurang lebih khusus. Untuk atribut spesifik dari elemen mana yang memiliki kondisi seperti apa, silakan lihat contoh demonstrasi .
Masalah di sebagian besar browser adalah bahwa kedua metode mengembalikan nilai atribut asli, sedangkan dalam aplikasi aktual, yang sering dibutuhkan adalah URL absolutnya. Solusi dalam "berurusan dengan nilai -nilai HREF yang tidak memenuhi syarat" terlalu kompleks. Berikut adalah solusi yang relatif sederhana. Ini akan sangat sederhana jika Anda tidak mempertimbangkan perbedaan antara kode browser:
<Form Action = example.php id = contoh-form>
Saat ini, halaman ini benar -benar url http://dancewithnet.com/ </form>
<script>
var oform = document.geteLementById ('contoh-form');
// IE6, IE7, Safari, Chrome, Opera
Oform.action == 'example.php';
oa.getAttribute ('action') == 'example.php';
// Solusi generik untuk mendapatkan URL absolut
getqualifyUrl (Oform, 'action') == 'http://dancewithnet.com/example.php';
getqualifyUrl = function (oel, sattr) {
var surl = oel [sattr],
OD,
bdo = false;
// Apakah ini versi sebelum 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
mencoba{
bdo = @_jscript_version <5.8? Benar: @false;
} catch (e) {
bdo = false;
}
@*/
// Jika safari, chrome dan opera
if (/a /.__ proto __ == '//' || /source/.test((/a/.tostring+ '')))
|| /^function /( /. test ([]. sort)) {
bdo = true;
}
if (bdo) {
od = document.createelement ('div');
/*
// Hasil yang diperoleh oleh operasi DOM tidak akan berubah
var oa = document.createElement ('a');
oa.href = oel [SATTR];
Od.AppendChild (OA);
*/
od.innerHtml = ['<a href =', surl, '> </a>'] .join ('');
surl = od.firstchild.href;
}
return surl;
}
</script>
Ada beberapa hal yang lebih menarik di dua browser prasejarah, IE6 dan IE7. Nilai atribut yang diperoleh dengan dua metode dalam elemen HTML A, area dan IMG adalah URL absolut. Untungnya, Microsoft menyediakan parameter kedua untuk GetAttribute untuk menyelesaikan masalah ini, dan juga dapat menyelesaikan masalah mengembalikan atribut asli untuk elemen IFEAM dan tautan:
<tautan href = ../../example.css id = example-link>
<a href = example.php id = example-a> saat ini halaman benar-benar url http://dancewithnet.com/ </a>
<script>
var oa = document.geteLementById ('contoh-a'),
olink = document.getElementById ('Contoh-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>