HTML網頁中的URL表示方式_HTML/Xhtml_網頁製作

在HTML中，常見的URL有多種表示方式：
相對URL：

複製程式碼

複製程式碼

程式碼如下:


example.php
demo/example.php

./example.php
../../example.php
/example.php
../../example.php

/example.php

../../example.php /example.php ../../example.php /example.php ../../example.php

/example.php

../../example.php

/example.php
../../example.php
/example.php
../../example.php
/example。 >

絕對URL：

複製程式碼

代碼如下:

代碼如下:http://jb51.net/example.php
http://jb51.net:80/example.php
https://jb51.net/example.php


同時HTML中有大量的元素屬性值為URL，一般利用JavaScript取得這些URL屬性值有兩種方法：

複製程式碼

程式碼如下:

此時頁絕對URL是http://jb51.net/ a> <script> </script>var oA = document.getElementById('example-a');

oA.href == 'http://jb51.net/example.php';

oA.getAttribute('href') == 'example.php';

我們希望透過直接存取屬性的方式得到完整絕對URL，透過getAttribute方法得到其原始的屬性值，其實這是一個比較理想的結果，在所有的A級瀏覽器中，能順利得到這個結果的只有Firefox和IE8，其他瀏覽器都或多或少特殊情況，具體哪些元素的屬性存在什麼樣的情況請看演示實例。
在大部分瀏覽器中存在的問題是，兩種方式都返回的是原始屬性值，而實際應用中往往需要的是其絕對的URL，《Dealing with unqualified HREF values》中的解決方案太過於複雜，這裡提供一個相對簡單的解決方案，如果不考慮區別瀏覽器程式碼會非常簡單：

此時頁面絕對URL是http://jb51.net/

複製程式碼


程式碼如下:


<script> <br />var oForm = document.getElementById('example-form'); <br />//IE6、IE7、Safari、Chrome、Opera <br />oForm.action == 'example .php'; <br />oA.getAttribute('action') == 'example.php'; <br />//取得絕對URL的通用解決方案<br />getQualifyURL(oForm,'action') == 'http ://jb51.net/example.php'; <br />getQualifyURL = function(oEl,sAttr){ <br />var sUrl = oEl[sAttr], <br />oD, <br />bDo = falsese; <br />; //是否為IE8之前版本<br />//http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ <br />//http://msdn.microsoft .com/en-us/library/7kx09ct1(VS.80).aspx <br />/*@cc_on <br />try{ <br />bDo = @_jscript_version < 5.8 ?true : @false; <br />}catch( e){ <br />bDo = false; <br />} <br />@*/ <br />//如果是Safari、Chrome和Opera <br />if(/a/.__proto__=='//' || /source/.test((/a/.toString '')) <br />|| /^function (/.test([].sort)){ </script>

bDo = true;
}
if(bDo){
oD = document.createElement('div');

/*

//DOM 操作得到的結果不會改變var oA = document.createElement('a' ); oA.href = oEl[sAttr]; oD.appendChild(oA); */

oD.innerHTML = [' '].join('');

sUrl = oD.firstChild.href; } return sUrl; } 在IE6和IE7這兩個史前的瀏覽器身上還有一些更有意思的事情，兩種方法在HTML元素A、AREA和IMG獲取的屬性值都是絕對URL，幸好微軟為getAttribute提供了第二個參數可以解決這個問題，同時也可以對IFEAM和LINK元素解決前面提到的兩種方法都回傳原始屬性的問題： 複製程式碼程式碼如下:

<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">今回の页面绝对URLはhttp://jb51.net/</a>

var oA = document.getElementById('example-a'),
oLink = document.getElementById('example-a');
oA.href == 'http://jb51.net/example.php';
oA.getAttribute('href') == 'http://jb51.net/example.php';
oA.getAttribute('href',2) == 'example.php';
oLink.href == 'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://jb51.net/example.php';
</script>