在HTML中，常见的URL有多种表示方式：

相对URL：
以下是引用片段：
    example.php 
    demo/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，一般利用JavaScript获取这些URL属性值有两种方法：

以下是引用片段：
<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a> 
<script> 
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，《Dealing with unqualified HREF values》中的解决方案太过于复杂，这里提供一种相对简单的解决方案，如果不考虑区别浏览器代码会非常简单：

以下是代码片段：
<form action="example.php" id="example-form"> 
此时页面绝对URL是http://dancewithnet.com/</form> 
<script> 
var oForm = document.getElementById(’example-form’); 

//IE6、IE7、Safari、Chrome、Opera 
oForm.action ==  ’example.php’; 
oForm.getAttribute(’action’) == ’example.php’; 

//获取绝对URL的通用解决方案 
getQualifyURL(oForm,’action’) == ’http://dancewithnet.com/example.php’; 

getQualifyURL = function(oEl,sAttr){ 
  var sUrl = oEl[sAttr], 
      oD, 
      bDo = false; 
  //是否是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 
    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)){ 
    bDo = true; 
  } 
  if(bDo){ 
    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; 
  } 
  return sUrl; 
} 
</script>

在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://dancewithnet.com/</a> 

<script> 
var oA = document.getElementById(’example-a’), 
     oLink = document.getElementById(’example-link’); 

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>

建议继续学习：

1. 从输入 URL 到页面加载完成的过程中都发生了什么事情？    (阅读：14502)
2. 前端要给力之：URL应该有多长？    (阅读：7042)
3. 豆瓣的Url结构方式一览    (阅读：6661)
4. Ruby 解析 HTML (Nokogiri)    (阅读：3907)
5. HTML5是什么东东 我们为什么要关注    (阅读：3849)
6. HTML页面布局基础    (阅读：3683)
7. 为什么不压缩 HTML    (阅读：3473)
8. URL正则表达式    (阅读：3478)
9. IE的Get请求(URL)的最大长度限制    (阅读：3331)
10. HTML优化    (阅读：3104)