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

2017年6月5日

HTML テクノロジー プログラミング

意外と使わないタグの上位に来る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を実行させましょう。 <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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。