HTML網頁中的URL表示方式_HTML/Xhtml_網頁製作-html教學-PHP中文網

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

WBOY

發布： 2016-05-16 16:42:35

原創

1613 人瀏覽過

在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》中的解決方案太過於複雜，這裡提供一個相對簡單的解決方案，如果不考慮區別瀏覽器程式碼會非常簡單：

複製程式碼

程式碼如下:

<script> var oForm = document.getElementById('example-form'); //IE6、IE7、Safari、Chrome、Opera oForm.action == 'example .php'; oA.getAttribute('action') == 'example.php'; //取得絕對URL的通用解決方案 getQualifyURL(oForm,'action') == 'http ://jb51.net/example.php'; getQualifyURL = function(oEl,sAttr){ var sUrl = oEl[sAttr], oD, bDo = falsese; ; //是否為IE8之前版本 //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/ //http://msdn.microsoft .com/en-us/library/7kx09ct1(VS.80).aspx /*@cc_on try{ bDo = @_jscript_version < 5.8 ?true : @false; }catch( e){ bDo = false; } @*/ //如果是Safari、Chrome和Opera if(/a/.__proto__=='//' || /source/.test((/a/.toString '')) || /^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元素解決前面提到的兩種方法都回傳原始屬性的問題：複製程式碼程式碼如下:

今回の页面绝对URLはhttp://jb51.net/

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';