Base標簽小記：更改當前頁面的地址
阿新 • • 發佈：2017-09-14
代碼 今天 elements attribute set 部署 方式 相對 項目部署
一般來說，H5遊戲的部署，index.html和代碼資源都會放在同一個地址下然後使用iFrame導入到需要加載遊戲的頁面即可。
但是今天遊戲項目部署遇到了一個問題，遊戲自己的訪問頁面（index.html）的地址（a.com）和遊戲代碼資源的地址（b.com）不在一個地方，這就導致在index中加載了遊戲代碼後，遊戲代碼中引用的所有相對路徑的資源都報404，（比如實際地址是b.com/res/1.png，但是由於加載到index中，使用a.com的路徑，所以請求地址變成了a.com/res/1.png，當然會404了。）
解決方法就是修改當前頁面的默認地址，即Base標簽。
地址不變時
遊戲資源地址不會變化時可以這麽寫：
<html> <head> <base href="http://www.b.com/res/" /> </head> <body> </body> </html>
此時，當前頁面下的所有相對路徑都相對於b.com/res/這個路徑來尋找。
地址會變動時
地址會變動時，可以采用js動態添加base標簽或動態修改base標簽來改變默認地址，如下：
1 var basePath = ""; // 各種方式獲取要更改的默認路徑 2 3 var base = document.createElement("base");4 base.setAttribute("href", basePath); 5 document.getElementsByTagName(‘head‘)[0].appendChild(base);
效果一致。
註意事項
默認地址一旦改變，就會影響當前頁面上的所有相對路徑。
Base標簽小記：更改當前頁面的地址