ベースURLの設定
概要
ディレクトリ階層の異なるページを用意する場合、基準となるURLを設定しておく方がなにかと便利なことがあります。例えば、相対パスで外部ファイルを読み込む場合、ページ毎に参照URLが異なるので、ディレクトリの構成を変えた際に変更が多くなりますが、ベースとなるURLを設定しておくことで、そういった手間が省けます。
目次
- 詳細
- 備考
- 参考リンク
詳細
プロジェクトの構成が以下の通りで「src1.html」と「src2.html」から「dest.html」へ遷移させる場合
/
├ dest.html
└ category/
├ src1.html
└ sample/
└ src2.html
◆ ベースURLを設定せずに相対パスでページ遷移
遷移元１（/category/src1.html）
<a href="../dest.html">遷移先（dest.html）</a>
遷移元２（/category/sample/src2.html）
<a href="../../dest.html">遷移先（dest.html）</a>
◆ ベースURLを設定して相対パスでページ遷移
ベースURLの設定
<head>
<base href="http://www.xxx-yyy.zzz/">
</head>
遷移元１（/category/src1.html）
<a href="dest.html">遷移先（dest.html）</a>
遷移元２（/category/sample/src2.html）
<a href="dest.html">遷移先（dest.html）</a>
備考
AngularJSのルーティング機能を使おうとした時になぜかうまくいかず、ベースURLを設定したらすんなり動いたことがあります。（サーバの設定やルーティングが間違っていた可能性もありますが...）