[HTML] 今更だけどbaseタグ調査

home-plate-1592627_1280
LINEで送る
Share on GREE
Share on LinkedIn

意外と使わないタグの上位に来るbaseタグですが、ちゃんと仕様を理解すると、便利に使えるテクニックもあるので、参考にしてください。

baseタグの仕様

HEADタグ内の開始直下に書くルール

基本的にはページ内に1つしか記述できない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の4つががセットでき、aリンクに影響する。

_blank : 別ページが立ち上がる
_self : 同一ページで遷移する
_parent : iframeの親要素を切り替える
_top : フレーム要素を解除して、一番親要素でURLを切り替える

上記以外にframesetを利用している場合、frame名を登録することができますが、今のWEBでframesetを使うことは皆無となっているので、この仕様は死に仕様になっているようです。

どうなるか分からないから実験する。

Q、また、baseタグのactive、非アクティブの切り替えはできるか?

baseタグにdisabledの属性は効果がないようです。
もし仮に無効にしたい場合は直後に以下のscriptを実行させましょう。

でも、こんなスクリプトを挿入するぐらいなら、はじめからbaseタグ使わないほうが良いかも・・・

Q、 ページ読み込み後に追加されたbaseタグはどうなる?

まず、ページ内のどこかに以下のスクリプトをセットします。

この時にページのscriptタグとlinkタグ(css)は、base設定が聞いていないのですが、aリンクに関しては、baseタグが有効になるようです。
要するにAリンクはクリックのタイミングで有効なbaseタグがセットされるようですね。

Q、bodyだけにbaseタグを影響させる方法とHEADとのその逆

bodyだけに実行させたい時は、bodyタグの開始直下にbaseタグを書けば、headタグに影響させずに実行できます。
その逆は、headタグの閉じタグのすぐ上に、先程のbaseタグ削除スクリプトを挿入すれば、headのタイミングだけで実行できます。

関連理リンク

W3C : https://www.w3.org/wiki/HTML/jp/Elements/base

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*