使用Javascript編寫getabsolutepath工具函數，讓URL路徑獲取更加便捷

每個前端開發都會遇到獲取當前頁面的完整路徑的情況，特別是在製作單頁面應用時。通常情況下，我們會使用JavaScript自帶的方法location.href來獲取當前頁面的路徑，但是這種方式也存在一些問題，比如說獲取的路徑不是絕對路徑，在單頁面應用中可能會導致路徑出錯。在這篇文章中我們將介紹一個名為getAbsolutePath的函數，它可以更加方便地獲取絕對路徑。

一、函數實現

function getAbsolutePath(path) {
  var a = document.createElement('a');
  a.href = path;
  return a.href;
}

這個函數接受一個參數 path，這個參數可以是相對路徑或絕對路徑。函數內部創建了一個a標籤，然後將路徑賦值給a標籤的href屬性，再將這個a標籤的href屬性返回，這個href屬性已經被瀏覽器自動解析成完整路徑了。

接下來我們來試試getAbsolutePath函數的效果，假設我們有一個相對路徑”../images/logo.jpg”，嘗試使用getAbsolutePath函數把這個相對路徑解析成絕對路徑。

var path = '../images/logo.jpg';
var absolutePath = getAbsolutePath(path);
console.log(absolutePath);

上述代碼將輸出完整的絕對路徑，包括協議、主機名、端口號以及文件路徑。

二、兼容性問題

上面的getAbsolutePath函數在絕大多數現代瀏覽器中都能夠正常運行，但是一些老舊的瀏覽器（如IE6~IE7）會出現一些兼容性問題。

當a標籤的href屬性被賦值為相對路徑時，較新的瀏覽器會自動將其解析為絕對路徑，而早期的瀏覽器則不具備這個功能。因此，在一些老版本的瀏覽器中，我們需要手動將相對路徑解析成絕對路徑，方法是先獲取當前頁面的絕對路徑，然後將相對路徑拼接在其後，這種方法的實現如下：

function getAbsolutePath(path) {
  var currentUrl = window.location.href;
  var url = path;
  if(path.indexOf("/") !== 0) {
    url = currentUrl.substring(0, currentUrl.lastIndexOf("/") + 1) + path;
  }
  var a = document.createElement('a');
  a.href = url;
  return a.href;
}

這裡的代碼判斷了傳遞進來的路徑是否以”/”字符開頭，如果是相對路徑則嘗試拼接成絕對路徑，否則直接解析傳入的路徑。這樣做，我們就可以兼容大部分舊版本瀏覽器了。

三、拓展應用

在實際的開發中，我們常常需要根據當前頁面的絕對路徑動態獲取其它資源的路徑，比如圖片或文件的路徑。為了方便我們動態生成這些路徑，我們可以把獲取絕對路徑的方法封裝成一個通用的函數，比如下面的getSiteUrl函數：

function getSiteUrl(path) {
  var currentUrl = window.location.href;
  var url = path;
  if(path.indexOf("/") !== 0) {
    url = currentUrl.substring(0, currentUrl.lastIndexOf("/") + 1) + path;
  }
  var a = document.createElement('a');
  a.href = url;
  return a.href;
}

function getImageUrl(url) {
  return getSiteUrl("/assets/images/" + url);
}

function getCssUrl(url) {
  return getSiteUrl("/assets/css/" + url);
}

function getJsUrl(url) {
  return getSiteUrl("/assets/js/" + url);
}

這裡我們將通用的getSiteUrl方法和具體的getImageUrl、getCssUrl、getJsUrl方法分別封裝到了不同的函數中，以方便我們動態生成對應的資源路徑，比如：

var logoUrl = getImageUrl("logo.png");
var cssUrl = getCssUrl("style.css");
var jsUrl = getJsUrl("app.js");

這些函數可以更加方便地讓我們生成資源路徑，避免了重複寫絕對路徑的繁瑣過程。

結語

getAbsolutePath這個函數雖然看似簡單，但其實包含了許多前端開發中常見的問題。寫這篇文章的目的也是希望可以給各位前端開發者提供一些思路和方法，讓大家在開發中更加得心應手。同時，我們也要時刻注意兼容性問題，不同瀏覽器有着不同的特點和限制，只有不斷學習和實踐，我們才能在不斷變化的技術環境中立足。