01HTMl-標籤

1、base用於定義頁面連接的打開方式

　　<base target="_blank"/> 定義頁面連接默認打開方式,base經過target屬性告訴瀏覽器如何打開頁面。

• _blank，在新窗口顯示目標網頁
• _parent，框架網頁中當前整個窗口位置顯示目標網頁
• _self，在當前窗口顯示目標網頁
• _top，框架網頁中在上部窗口中顯示目標網頁

　

2、base用於URL的基礎定位

　　<base href=""/> 定義頁面用於URL的基礎定位
　　<base>標籤能夠爲整個頁面定義全部連接的基礎定位，主要做用是爲了確保文檔中的全部相對定位URL均可以被分解成正確的文檔地址，使文檔自己被移動或重命名的狀況下也能夠正確的解析，當這些元素進行跳轉時，都會基於當前目錄加上這個默認的URL（相對路徑的狀況下）再加上本身的href屬性值來跳轉。

　

***　　<base>標籤對頁面中元素href爲絕對路徑的元素是不起做用的，可是絕對連接必須是完整的，不然仍是會被base影響到

3、<base>標籤的坑

在使用base標籤的頁面，須要使用相對路徑的地方，好比說錨連接，或者a標籤跳轉到其餘頁面會被影響到。這樣就很麻煩。
我嘗試寫了一段代碼用於在須要使用相對連接或者錨連接的頁面：

 1 function getByClass(oParent,sClass){    
 2     var aEle = oParent.getElementsByTagName('*');
 3     var aResult = [];
 4     var re = new RegExp('\\b'+sClass+'\\b','i');
 5             
 6     for(var i=0;i<aEle.length;i++){
 7         if(re.test(aEle[i].className)){
 8             aResult.push(aEle[i]);
 9         }
10     }
11     return aResult;
12 }
13         
14 function getUrl(obj){
15     var loadHref = window.location.href;
16     var baseHref = loadHref.substring(0,loadHref.lastIndexOf("/")) + '/';     
17     var toHref = obj.getAttribute("href");             
18     var indexA = loadHref.lastIndexOf("#");     
19     var indexB = toHref.lastIndexOf("#", 0);     
20     var href = null;
21                     
22     if (indexB >= 0) {
23         if(indexA>0){
24                href = loadHref.substring(0,loadHref.lastIndexOf("#")) + toHref;
25         }else{
26             href = loadHref + toHref;
27         }
28      } else {
29            href = baseHref + toHref;
30      }
31 
32     return href;
33 }

　

 <div id="myTest" class="test-wrap">
	<a id="myTestL" href="#toTest" class="changeWay">錨連接</a>
	<a id="myTestR" href="jump.html" class="changeWay">跳轉</a>
</div>

　

var Doc = document;
var aChngs = getByClass(Doc,'changeWay');
		
for(var i=0;i<aChngs.length;i++){
	aChngs[i].setAttribute('href',getUrl(aChngs[i]));
}

　　* 使用jQuery的話，引入jQuery文件的時候須要使用絕對路徑來引用，省得被base影響到，這樣就能夠；

　

 1 function GetMaoUrl(obj){
 2     var loadHref = window.location.href;
 3     var baseHref = loadHref.substring(0,loadHref.lastIndexOf("/")) + '/';     
 4     var toHref = obj.attr('href');             
 5     var indexA = loadHref.lastIndexOf("#");     
 6     var indexB = toHref.lastIndexOf("#", 0);     
 7     var href = null;
 8             
 9     if (indexB >= 0) {
10         if(indexA>0){
11                href = loadHref.substring(0,loadHref.lastIndexOf("#")) + toHref;
12         }else{
13             href = loadHref + toHref;
14         }
15     } else {
16         href = baseHref + toHref;
17     }
18         
19      return href;
20 }

 

$('.changeWay').each(function (){
	$(this).attr('href',GetMaoUrl($(this)));		
})

　　

　ps：做爲一個菜鳥，水平實在有限，遇到這個問題以後向不少人請教，結果獲得的大多建議是放棄使用base。我以爲存在就是有價值的，可能有更好的方法因爲本身的眼界所限看不到，因此若是您有更好的解決方案或者對上述代碼有優化建議請不吝賜教；