意外と使わないタグの上位に来るbaseタグですが、ちゃんと仕様を理解すると、便利に使えるテクニックもあるので、参考にしてください。
baseタグの仕様
HEADタグ内の開始直下に書くルール
基本的にはページ内に１つしか記述できないbaseタグのため、headタグ内（それも上の方）に書くのを推奨されている。
ページ内のsrcやhrefの値のdocument_rootを任意にセットできる。
baseのhref属性に入力したURLをそのページのドキュメントルートとして扱われる。
URLでもローカルパスでもセットできる。
あまり使われないやり方だが、サイトの途中階層だが、ページ内はローカル階層の指定で書くことができる。
ただし、ローカルリンクをセットした時に、階層がずれて変なことになるので、バグの元としてあまり使われない・・・
フルパスのURLに対しては適用されない
srcやhrefで影響されたくない場合は、http://やhttps://のようにフルURLで記述するといい。
ポート番号を自動判別してくれる書き方
baseタグにhttps://で記述すると、そのページ内のsrcとhrefにhttp://で始まる記述をすると、証明書エラーが発生する。
https://~~とhttp://~~を自動で切り替えたい場合は「//~~」という風に記述すると良い。
複数のbaseタグの優先順位は？
baseタグを複数書き込むと、一番先頭に書かれているbaseタグが有効になる。
ただし、JSでbaseタグを書いたり消したりすると、個別に違ったbase設定が行える。
→複雑なのでやらないほうがいい。
target属性の内容
target属性は_blank, _self, _parent, _topの４つががセットでき、aリンクに影響する。
_blank : 別ページが立ち上がる
_self : 同一ページで遷移する
_parent : iframeの親要素を切り替える
_top : フレーム要素を解除して、一番親要素でURLを切り替える
上記以外にframesetを利用している場合、frame名を登録することができますが、今のWEBでframesetを使うことは皆無となっているので、この仕様は死に仕様になっているようです。
どうなるか分からないから実験する。
Q、また、baseタグのactive、非アクティブの切り替えはできるか？
baseタグにdisabledの属性は効果がないようです。
もし仮に無効にしたい場合は直後に以下のscriptを実行させましょう。
<script>
var base = document.getElementsByTagName("base");
for(var i=base.length-1; i>=0; i++){
base[i].parentNode.removeChild(base[i]);
}
</script>
でも、こんなスクリプトを挿入するぐらいなら、はじめからbaseタグ使わないほうが良いかも・・・
Q、 ページ読み込み後に追加されたbaseタグはどうなる？
まず、ページ内のどこかに以下のスクリプトをセットします。
<script>
window.addEventListener("load",function(){
var base = document.createElement("base");
base.href="//google.com";
document.head.appendChild(base);
});
</script>
この時にページのscriptタグとlinkタグ(css)は、base設定が聞いていないのですが、aリンクに関しては、baseタグが有効になるようです。
要するにAリンクはクリックのタイミングで有効なbaseタグがセットされるようですね。
Q、bodyだけにbaseタグを影響させる方法とHEADとのその逆
bodyだけに実行させたい時は、bodyタグの開始直下にbaseタグを書けば、headタグに影響させずに実行できます。
その逆は、headタグの閉じタグのすぐ上に、先程のbaseタグ削除スクリプトを挿入すれば、headのタイミングだけで実行できます。
<script>
var base = document.getElementsByTagName("base");
for(var i=base.length-1; i>=0; i++){
base[i].parentNode.removeChild(base[i]);
}
</script>
関連理リンク
W3C : https://www.w3.org/wiki/HTML/jp/Elements/base
0 件のコメント:
コメントを投稿